a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:after, blockquote:before, q:after, q:before {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

img {
  width: 100%;
  max-width: 100%;
}

/* @import url("//hello.myfonts.net/count/375e3c"); */
@font-face {
  font-family: "Noyh";
  src: url("../fonts/375E3C_1_0.woff2") format("woff2"), url("../fonts/375E3C_1_0.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Noyh";
  src: url("../fonts/375E3C_0_0.woff2") format("woff2"), url("../fonts/375E3C_0_0.woff") format("woff");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .text-center--mobile {
    text-align: center;
  }
}

.mb-075 {
  margin-bottom: 0.75rem;
}

.hidden {
  display: none;
}

.screenwidth-small {
  display: none;
}
@media screen and (max-width: 1000px) {
  .screenwidth-small {
    display: inline-flex;
  }
}

.screenwidth-medium {
  display: none;
}
@media screen and (min-width: 1001px) {
  .screenwidth-medium {
    display: inline-flex;
  }
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.25rem;
  color: black;
  letter-spacing: 0.1rem;
  border-bottom: solid var(--c1);
  border-width: 0 0 3px 0;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  text-transform: uppercase;
}
.button:hover, .button:focus {
  border-color: rgb(133, 130, 130);
}
.button--regular {
  font-weight: 400;
}
.button--no-padding {
  padding: 0;
}
.button--fullwidth {
  width: 100%;
  text-align: center;
}
.button--background-color {
  background: var(--c1);
  border-width: 0;
  padding: 1rem;
}
.button--background-color:hover {
  background: color-mix(in srgb, var(--c1) 95%, white);
}
.button--small {
  text-transform: none;
  font-size: 1.125rem;
  padding: 0.25rem;
}
.button--with-svg-right svg, .button--with-svg-left svg {
  height: 0.875rem;
  width: auto;
  fill: black;
}
.button--with-svg-right svg {
  margin-left: 0.5rem;
}
.button--with-svg-left svg {
  margin-right: 0.5rem;
}
.button--margin-bottom {
  margin-bottom: 1rem;
}

input {
  font-family: "Noyh", Arial, sans-serif;
}
input[type=text], input[type=number], input[type=email] {
  background: white;
  border: none;
  font-size: 1rem;
  padding: 0.375rem;
}
input.fullwidth {
  width: 100%;
}
input.border {
  border: 1px solid black;
}
input.grey-background {
  background: var(--bg);
}

select,
textarea {
  background: white;
  border: none;
  font-size: 1rem;
  padding: 0.375rem;
  font-family: inherit;
  -webkit-appearance: none;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  text-transform: uppercase;
  font-size: 1.125rem;
  font-weight: 700;
  min-height: 1rem;
}
.checkbox input[type=checkbox],
.checkbox input[type=radio] {
  height: 1rem;
  opacity: 0;
  width: 1rem;
  cursor: pointer;
}
.checkbox input[type=checkbox] + label,
.checkbox input[type=radio] + label {
  margin-left: 0.5rem;
  cursor: pointer;
  flex: 0 0 100%;
  margin-top: 0.1rem;
}
.checkbox input[type=checkbox] + label::before,
.checkbox input[type=radio] + label::before {
  border: 3px solid var(--c1);
  content: "";
  height: 1rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 1rem;
}
.checkbox input[type=checkbox] + label::after,
.checkbox input[type=radio] + label::after {
  content: "";
  opacity: 0;
  background-repeat: no-repeat;
  background-image: url("/images/check.svg");
  background-size: 1rem;
  height: 1rem;
  width: 1rem;
  position: absolute;
  left: 0.175rem;
  top: 0.25rem;
}
.checkbox input[type=checkbox]:checked + label::after,
.checkbox input[type=radio]:checked + label::after {
  opacity: 1;
}
.checkbox__images {
  display: inline-flex;
  align-items: center;
  position: absolute;
  right: -40px;
  width: 50px;
}
.checkbox__images img {
  filter: grayscale(1);
}

.flash-notice {
  background: var(--c1);
  padding: 1rem;
  font-size: 1.125rem;
}
.flash-notice--error {
  background: var(--red);
}

.link {
  border-bottom: solid var(--c1);
  border-width: 0 0 3px 0;
}

.floating-cart {
  position: absolute;
  right: 4rem;
  top: 1.375rem;
  z-index: 3;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .floating-cart {
    top: 0.5rem;
    right: 3.5rem;
  }
}
.floating-cart__open-button {
  display: inline-flex;
  align-items: center;
}
.floating-cart__open-button:hover svg {
  stroke: var(--c1);
}
.floating-cart__open-button svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: stroke 0.2s ease-in-out;
}
.floating-cart__open-button__count {
  margin: 0 0.25rem 0 0;
}
.floating-cart__content {
  display: none;
  position: absolute;
  right: 0;
  top: 2rem;
  padding: 1rem 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);
  background: white;
  width: 320px;
}
.floating-cart__content.opened {
  display: block;
}
.floating-cart__content h4 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}
.floating-cart__content__list {
  border: solid lightgray;
  border-width: 1px 0;
  padding: 1rem;
  margin: 0.5rem 0;
}
.floating-cart__content__list-item {
  display: flex;
  margin: 0 0 0.25rem;
}
.floating-cart__content__list-item:last-child {
  margin: 0.5rem 0 0;
}
.floating-cart__content__list-item span:first-child {
  text-align: left;
  min-width: 2rem;
}
.floating-cart__content__list-item span:last-child {
  margin-left: auto;
}
.floating-cart__content__action-buttons {
  display: flex;
  justify-content: center;
}
.floating-cart__content__close-button {
  display: inline-flex;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}
.floating-cart__content__close-button svg {
  width: 1rem;
  height: 1rem;
  transition: stroke 0.2s ease-in-out;
}
.floating-cart__content__close-button:hover svg {
  stroke: var(--c1);
}
.floating-cart__content .empty {
  margin: 0.5rem 0;
}

.amount {
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
}
.amount button {
  display: inline-flex;
  background: transparent;
  border: 0 !important;
  padding: 0 !important;
  color: var(--c1);
  z-index: 1;
}
.amount button svg {
  height: 1rem;
  width: 1rem;
}
.amount button.amount__decrease {
  margin: 0 -1.375rem 0 0;
}
.amount button.amount__increase {
  margin: 0 0 0 -1.375rem;
}
.amount input {
  text-align: center;
  width: 90px;
  font-size: 1.25rem;
  font-weight: 700;
  -moz-appearance: textfield;
}
.amount input::-webkit-outer-spin-button, .amount input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

main {
  display: block;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  main {
    margin-top: 6rem;
  }
  .start main {
    margin-top: 7.5rem;
    position: relative;
  }
}

.pt12 {
  font-size: 1rem;
}

.pt14,
.pt16 {
  font-size: 1.25rem;
}

.pt19 {
  font-size: 1.5rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .pt19 {
    font-size: 1.15rem;
  }
}

.pt35,
.pt38,
.pt40 {
  font-size: 2.375rem;
}
@media screen and (max-width: 75.25rem) {
  .pt35,
  .pt38,
  .pt40 {
    font-size: 1.9rem;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .pt35,
  .pt38,
  .pt40 {
    font-size: 1.65rem;
  }
}

.pt50 {
  font-size: 3.125rem;
}
@media screen and (max-width: 75.25rem) {
  .pt50 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .pt50 {
    font-size: 1.65rem;
  }
}

.pt94 {
  font-size: 5.275rem;
}
@media screen and (max-width: 75.25rem) {
  .pt94 {
    font-size: 4.3rem;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .pt94 {
    font-size: 2.6rem;
  }
}

.pt130 {
  font-size: 8.125rem;
}
@media screen and (max-width: 75.25rem) {
  .pt130 {
    font-size: 6rem;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .pt130 {
    font-size: 3rem;
  }
}

.uppercase {
  text-transform: uppercase;
}

.normalcase {
  text-transform: initial;
}

.gesperrt10 {
  letter-spacing: 0.025em;
}

.gesperrt-20 {
  letter-spacing: -0.005em;
}

.gesperrt-35 {
  letter-spacing: -0.035em;
}

.lineHeight08 {
  line-height: 0.8;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .lineHeight08 {
    line-height: 0.85;
  }
}

.lineHeight095 {
  line-height: 0.95;
}

.lineHeight1 {
  line-height: 1;
}

.alignLeft {
  text-align: left;
}

.alignCenter {
  text-align: center;
}

.alignRight {
  text-align: right;
}

.slim {
  font-weight: 500;
}

.bold,
b,
strong {
  font-weight: 800;
}

.hyphens {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.whiteText {
  color: white;
}

.relative {
  position: relative;
}

.outlineText {
  font-weight: 800;
}
@supports (text-stroke: 1px black) {
  .outlineText {
    color: transparent;
    text-stroke: 1px black;
  }
  .outlineText.whiteText {
    text-stroke: 1px white;
  }
  .outlineText::selection {
    text-stroke: 1px transparent;
  }
}
@supports (-webkit-text-stroke: 1px black) {
  .outlineText {
    color: transparent;
    -webkit-text-stroke: 1px black;
  }
  .outlineText.whiteText {
    -webkit-text-stroke: 1px white;
  }
  .outlineText::selection {
    -webkit-text-stroke: 1px transparent;
  }
}
@supports (text-stroke: 2px black) {
  .outlineText.colored {
    text-stroke: 2px var(--c1);
  }
  @media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
    .outlineText.colored {
      text-stroke: 1px var(--c1);
    }
  }
}
@supports (-webkit-text-stroke: 2px black) {
  .outlineText.colored {
    -webkit-text-stroke: 2px var(--c1);
  }
  @media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
    .outlineText.colored {
      -webkit-text-stroke: 1px var(--c1);
    }
  }
}

* {
  box-sizing: border-box;
  font-variant-ligatures: none;
}
*:focus {
  outline: none;
}

html {
  scrollbar-gutter: stable;
  interpolate-size: allow-keywords;
  --c1: rgb(214, 165, 125);
  --red: rgb(223, 91, 91);
  --bg: #f5f5f5;
  --headerHeight: 4.9rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  html {
    --headerHeight: 4.5rem;
  }
}
html:has(.openNav) {
  overflow: hidden;
}

body {
  font-family: "Noyh", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
}

a {
  transition: all 0.2s ease-in-out;
}
a:link, a:visited {
  color: inherit;
  text-decoration: none;
}
a:hover, a:active {
  color: inherit;
  text-decoration: none;
}
.textDecoration a:link, .textDecoration a:visited {
  text-decoration: underline;
  text-decoration-color: var(--c1);
  text-decoration-skip: objects;
}
@media screen and (min-width: 46.9375rem), screen and (min-height: 599px) {
  .textDecoration a:hover, .textDecoration a:active {
    color: var(--c1);
    text-decoration: none;
  }
}
a.underlined, .underlined a {
  display: inline-block;
  line-height: 0.8;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  a.underlined, .underlined a {
    line-height: 1;
  }
}
a.underlined:link, a.underlined:visited, .underlined a:link, .underlined a:visited {
  border-bottom: 2px solid var(--c1);
}
@media screen and (min-width: 46.9375rem), screen and (min-height: 599px) {
  a.underlined:hover, a.underlined:active, .underlined a:hover, .underlined a:active {
    color: var(--c1);
    border-bottom-color: transparent;
  }
}
.underlined.pt50 a:link, .underlined.pt50 a:visited {
  border-bottom-width: 2px;
}
@media screen and (min-width: 46.9375rem), screen and (min-height: 599px) {
  a.colorchange:hover {
    color: var(--c1);
  }
  a.colorchange:hover path {
    fill: var(--c1);
    stroke: var(--c1);
  }
}
a.hideLink {
  border-bottom: none !important;
  pointer-events: none !important;
}
a.multipleLines {
  /*transition: background 0.4s ease-in-out, color 0.2s ease-in-out;
  background:
          repeating-linear-gradient( white,
                  white calc(0.9em - 1px),
                  $c1 calc(0.9em - 1px),
                  $c1 0.95em);*/
  text-decoration: underline;
  text-decoration-color: var(--c1);
}
a.multipleLines:hover {
  color: var(--c1);
  text-decoration-color: transparent;
}

button {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  font-size: inherit;
  font-family: inherit;
  text-transform: inherit;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  line-height: 0.95;
}
button:focus {
  outline: none;
}
button.underlined, .underlined button {
  border-bottom: 2px solid var(--c1);
  padding-top: 2px;
}
button.underlined:hover, button.underlined:active, .underlined button:hover, .underlined button:active {
  color: var(--c1);
  border-bottom-color: transparent;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  button.underlined:hover, .underlined button:hover {
    color: black;
    border-bottom-color: var(--c1);
  }
}

.flex {
  display: flex;
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex.column {
  flex-direction: column;
}
.flex.alignStretch {
  align-items: stretch;
}
.flex.justifyCenter {
  justify-content: center;
}
.flex.justifyBetween {
  justify-content: space-between;
}
.flex.alignCenter {
  align-items: center;
}
.flex.alignEnd {
  align-items: flex-end;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .flex.smartphoneBlock {
    display: block;
  }
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  z-index: 10;
}
header .logo {
  width: 100%;
  height: 100%;
}
header .logo img {
  width: auto;
  height: 100%;
  margin: 0 auto;
}
header .mobileStartLogo {
  position: absolute;
  background: var(--bg);
  left: 0;
  width: 100%;
  top: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  height: 7rem;
  padding: 1rem 1rem 2rem;
}
header .mobileStartLogo img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 100%;
}
header .mobileStartLogo img.carnuntum {
  position: absolute;
  bottom: 0.75rem;
  height: 6%;
  left: 50%;
  transform: translateX(-50%);
}
header .top {
  height: var(--headerHeight);
  position: relative;
  z-index: 2;
  padding: 1.15rem;
}
header .top .close {
  display: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  header .top {
    padding: 0.9rem 1rem;
  }
  header .top.alignCenter {
    align-items: flex-start;
  }
}
header .menuButton {
  position: absolute;
  right: 1rem;
  top: 1.25rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  header .menuButton {
    right: 0.5rem;
    top: 0.5rem;
  }
}
header .breadcrumbs {
  position: absolute;
  left: 1rem;
  top: 1.25rem;
  pointer-events: none;
}
header .breadcrumbs a {
  pointer-events: auto;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  header .breadcrumbs {
    display: none;
  }
}
header .menuButton {
  cursor: pointer;
  z-index: 2;
}

.openNav header .top .close {
  display: block;
}
.openNav header .top .icon {
  display: none;
}
.openNav .mobileStartLogo {
  opacity: 0;
}
.openNav #mainNav {
  opacity: 1;
  display: block;
}
.openNav #mainNav > ul {
  opacity: 1;
  transition-delay: 0.2s;
}
.openNav .navBg {
  max-height: 100dvh;
  transition-delay: 0s;
}

.navBg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  max-height: 0;
  overflow: hidden;
  transition: 0.2s ease-in-out 0.2s;
}

#mainNav {
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: none;
  padding-top: 7rem;
  background: var(--bg);
  opacity: 1;
  transition: all 0.4s ease-in-out;
  transition-behavior: allow-discrete;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  #mainNav {
    padding-top: calc(var(--headerHeight) + 1rem);
    padding-bottom: 5rem;
  }
}
#mainNav > ul {
  opacity: 0;
  transition: max-height 0.4s ease-in-out, opacity 0.2s ease-out;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 2.3rem);
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  #mainNav > ul {
    width: calc(100% - 2rem);
    height: 100%;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
  }
}
#mainNav > ul > li {
  text-align: center;
  position: relative;
  opacity: 0;
  transition: opacity 0.6s ease-in-out, border 0.2s ease-in-out 0.4s;
  height: auto;
  border-top: none;
  border-bottom: 2px solid black;
  padding: 5px 0 3px;
}
#mainNav > ul > li.showSubnav {
  border-bottom: none;
}
#mainNav > ul > li a {
  height: 100%;
  width: 100%;
}
#mainNav > ul > li a.active {
  color: var(--c1);
}
@media screen and (min-width: 46.9375rem), screen and (min-height: 599px) {
  #mainNav > ul > li a:hover {
    color: var(--c1);
  }
}
#mainNav > ul > li.showSubnav .subnav {
  min-height: auto;
  max-height: 100dvh;
  opacity: 1;
}
.openNav #mainNav > ul > li {
  opacity: 1;
}
#mainNav .subnav {
  /* position: absolute;
  top: 0;
  right: 0;
  left: 0; */
  z-index: 2;
  max-height: 0;
  overflow: hidden;
  color: black;
  opacity: 0;
  transition: min-height 0.6s ease-in-out 0.2s, max-height 0.6s ease-in-out 0.2s, opacity 0.6s ease-in-out 0.2s;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  #mainNav .subnav {
    position: static;
  }
}
#mainNav .subnav li {
  border-bottom: 2px solid black;
  text-align: center;
  position: relative;
  border-bottom-color: var(--c1);
}
#mainNav .subnav li:first-child {
  border-top: 2px solid black;
}
#mainNav .subnav li .title {
  position: absolute;
  top: 0.5em;
  left: 0.8em;
  right: 0.84em;
}
#mainNav .subnav li a {
  transition: transform 0.2s ease-in-out;
  padding: 0.5em 0.8em 0.25em;
  display: block;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  #mainNav .subnav li a {
    padding: 0.5em 0.5em 0.25em;
  }
}
#mainNav .subnav li a:hover {
  color: black;
}

.revealTitle {
  position: relative;
}
.revealTitle .title,
.revealTitle .subtitle {
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
  display: inline-block;
  position: relative;
}
.revealTitle .title {
  opacity: 0;
  position: absolute;
  transition-delay: 0s;
  left: 0;
  right: 0;
}
.revealTitle .subtitle {
  opacity: 1;
  transition-delay: 0.4s;
}
@media screen and (min-width: 46.9375rem), screen and (min-height: 599px) {
  .revealTitle:hover .title {
    opacity: 1;
    transition-delay: 0.1s;
  }
  .revealTitle:hover .subtitle {
    opacity: 0;
    transition-delay: 0s;
  }
}

.close {
  width: 14px;
  height: 14px;
  padding: 9px;
  box-sizing: content-box;
  cursor: pointer;
}
.close svg {
  display: block;
  width: 14px;
  height: 14px;
}
.close svg line {
  fill: none;
  stroke: black;
  stroke-linejoin: round;
  stroke-width: 1px;
}

.navButton {
  border-radius: 0;
  border: none;
  padding: 7px;
  background: none;
  cursor: pointer;
}
.navButton:focus {
  outline: none;
}
.navButton .bar {
  width: 1.3rem;
  height: 2px;
  display: block;
  background: black;
  transform-origin: 56% 50%;
  transition: transform 0.2s ease-in-out 0.2s, opacity 0.1s linear 0.2s, background 0.2s ease-in-out;
}
.navButton .bar.topBar {
  transform-origin: 0 1px;
}
.navButton .bar.middleBar {
  margin: 4px 0;
  transition: transform 0.2s ease-in-out 0.2s, background 0.2s ease-in-out 0.2s;
  position: relative;
}
.navButton .bar.middleBar .inside {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
}
.navButton .bar.bottomBar {
  transform-origin: 0 180%;
}
@media screen and (min-width: 46.9375rem), screen and (min-height: 599px) {
  .navButton:hover .bar,
  .navButton:hover .middleBar .inside {
    background: var(--c1);
  }
}
.openNav .navButton {
  transition: transform 0.2s ease-in-out;
}
.openNav .navButton .bar {
  transition: transform 0.2s ease-in-out, opacity 0.1s linear 0.2s;
}
.openNav .navButton .topBar {
  -webkit-transform: translateY(7px);
  transform: translateY(7px);
  opacity: 0;
}
.openNav .navButton .bottomBar {
  -webkit-transform: translateY(-7px);
  transform: translateY(-7px);
  opacity: 0;
}
.openNav .navButton .middleBar {
  background: transparent;
  transition: transform 0.2s ease-in-out 0.2s;
}
.openNav .navButton .middleBar .inside {
  transition: transform 0.2s ease-in-out 0.2s;
  transform: rotate(45deg);
}
.openNav .navButton .middleBar .inside:last-child {
  transform: rotate(-45deg);
}

.icon,
.close {
  margin-left: auto;
}

.icon {
  width: 20px;
  height: 20px;
  padding: 6px;
  box-sizing: content-box;
  cursor: pointer;
}

.close,
.icon img {
  transition: transform 0.4s ease-in-out;
}

/*.close:hover, .icon:hover img{
  transform: rotate( 90deg );
  transform-origin: center center;
}*/
.start header .top .logo {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .start header .top .logo {
    opacity: 1;
  }
}
.start.openNav header .top .logo {
  opacity: 1;
  transition-delay: 0.2s;
}
.start.animateOut .canvas img,
.start.animateOut .canvas .show {
  opacity: 0 !important;
}
.start.animateOut .canvas .bigLogo {
  z-index: 5;
  top: 0 !important;
  opacity: 0;
  animation: biglogoAnimation2 1s;
  animation-fill-mode: forwards;
}

@keyframes biglogoAnimation {
  0% {
    transform: translate(-50%, -60%) scale(0.7);
  }
  100% {
    transform: translate(-50%, -60%) scale(1);
  }
}
@keyframes biglogoAnimation2 {
  0% {
    transform: translate(-50%, -60%) scale(1);
  }
  100% {
    transform: translate(-50%, -55%) scale(0);
  }
}
.news {
  height: 100dvh;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .news {
    height: auto !important;
  }
}
.news .canvas {
  flex: 1 1 auto;
  margin-top: var(--headerHeight);
  position: relative;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .news .canvas {
    display: none;
  }
}
.news .canvas .bigLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -60%) scale(0.95);
  width: 42vw;
  height: 28vw;
  will-change: transform;
  animation: biglogoAnimation 2s;
  animation-fill-mode: forwards;
  transition: z-index 0.6s ease-in-out, top 0.6s ease-in-out, transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  pointer-events: none;
}
.news .canvas .bigLogo svg {
  height: 100%;
  width: 100%;
}
.news .canvas .images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.news .canvas .images a {
  pointer-events: auto;
}
.news .canvas .images .eventsHeaderLink {
  display: block;
  position: absolute;
  transition: 0.3s ease-in-out;
  top: 42%;
  left: 47%;
  transform: translate(-50%);
  color: var(--bg);
  font-size: 3.5rem;
  margin: -19% 0 0 8%;
  letter-spacing: -0.01em;
}
.news .canvas .images .eventsHeaderLink span {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.news .canvas .images .eventsHeaderLink span.show {
  opacity: 1;
}
@media screen and (max-width: 79.9375rem) {
  .news .canvas .images .eventsHeaderLink {
    margin: -21% 0 0 8%;
  }
}
@media screen and (max-width: 75.25rem) {
  .news .canvas .images .eventsHeaderLink {
    font-size: 3rem;
  }
}
@media screen and (min-width: 1200px), screen and (min-height: 600px) {
  .news .canvas .images .eventsHeaderLink {
    margin: -15.5% 0 0 8%;
  }
}
@media screen and (min-aspect-ratio: 13/9) {
  .news .canvas .images .eventsHeaderLink {
    top: 0;
    margin: 0 0 0 8%;
  }
}
.news .canvas .images .eventsHeaderLink:hover.outlineText.colored {
  -webkit-text-stroke: 2px #000;
}
.news .canvas .images img {
  display: block;
  position: absolute;
  object-fit: contain;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.news .canvas .images img.show {
  opacity: 1;
}
.news .canvas .images .foto {
  top: 45%;
  left: 7%;
  width: 28.5%;
  height: 30%;
  z-index: 1;
}
.news .canvas .images .bewertungWrapper {
  position: absolute;
  top: 9%;
  left: 24.5%;
  width: 14%;
  height: 12vw;
  overflow-x: hidden;
}
@media screen and (max-aspect-ratio: 1/1) {
  .news .canvas .images .bewertungWrapper {
    top: 20%;
  }
}
@media screen and (min-aspect-ratio: 13/9) {
  .news .canvas .images .bewertungWrapper {
    top: 0;
  }
}
.news .canvas .images .bewertungWrapper img {
  position: static;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.news .canvas .images .siegel {
  left: 53%;
  width: 11%;
  top: 53.5%;
  height: 11vw;
  z-index: 2;
}
.news .canvas .images .flasche {
  left: 66.5%;
  width: 12%;
  top: 11%;
  height: 71%;
  z-index: 3;
}
.news .ticker {
  flex: 0 0 auto;
  border-top: 2px solid black;
  overflow: hidden;
  max-height: 4.6rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .news .ticker {
    max-height: none;
    border-top: none;
  }
  .news .ticker .siegel {
    width: 72%;
    margin: 0 auto;
    display: block;
  }
}
.news .ticker li {
  display: inline-block;
  padding: 0.8em 0 0.8em 0.9em;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .news .ticker li {
    display: block;
    padding: 0;
    margin-bottom: 3rem;
  }
  .news .ticker li:last-child {
    margin-top: 4rem;
    margin-bottom: 0;
  }
}
.news .ticker li h2 {
  display: inline-block;
  margin-right: 0.9em;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .news .ticker li h2 {
    display: block;
    margin-right: 0;
    padding: 1rem 1rem 0;
    text-align: center;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .news .ticker li .flasche {
    width: auto;
    height: 70vh;
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .news .ticker li .newsText {
    display: block;
    padding: 0 1rem;
    text-align: center;
  }
}

.content {
  margin-top: calc(var(--headerHeight) * 2);
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .content {
    margin-top: calc(var(--headerHeight) * 1.25);
  }
}

#intro {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  z-index: -1;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  #intro {
    position: static;
    height: auto;
    margin-bottom: 1.5rem;
  }
}
#intro + .content {
  min-height: calc(100dvh - var(--headerHeight));
  margin-top: 100dvh;
  background: var(--bg);
  padding-top: 1.5rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  #intro + .content {
    margin-top: 0;
    min-height: auto;
  }
}
#intro + .content#kollektion {
  min-height: 100dvh;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  #intro + .content#kollektion {
    padding-top: 0;
  }
}
#intro + .content#kollektion .wrapper {
  background: var(--bg);
}
#intro .introContainer {
  position: relative;
  width: 90%;
}
#intro .introContainer .intro,
#intro .introContainer .title {
  transition: opacity 0.2s ease-in-out;
}
#intro .introContainer .intro {
  transition-delay: 0.2s;
}
#intro .introContainer .title {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#intro .introContainer:hover .intro {
  opacity: 0;
}
#intro .introContainer:hover .title {
  opacity: 1;
  transition-delay: 0.2s;
}

.wrapper {
  width: 60%;
  margin: 0 auto;
}
.wrapper.wide {
  width: calc(100% - 2.3rem);
}
.wrapper section {
  margin-bottom: 25vh;
}

.bildBlock {
  position: relative;
  margin: 0 auto;
  width: 100%;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .bildBlock {
    margin-bottom: 3rem;
  }
}
.bildBlock .wrapper {
  width: 60%;
}
@media screen and (max-width: 75.25rem) {
  .bildBlock .wrapper {
    width: 75%;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .bildBlock .wrapper {
    width: 100%;
  }
}
.bildBlock .wrapper:hover .bildunterschrift {
  opacity: 1;
}
.bildBlock img {
  display: block;
  margin: 0 auto;
  opacity: 1;
  will-change: opacity;
  transition: opacity 0.4s ease-in-out;
}
.bildBlock img.pointer {
  cursor: pointer;
}
.bildBlock img.portrait {
  width: 50%;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .bildBlock img.portrait {
    width: 100%;
  }
}
.bildBlock .bildunterschrift {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
  opacity: 0;
}
@media screen and (max-width: 75.25rem) {
  .bildBlock .bildunterschrift {
    opacity: 1;
    left: 1rem;
    right: 1rem;
  }
}
.bildBlock .bildunterschrift .inner {
  padding: 1rem;
  border-top: 1px solid black;
  border-bottom: 2px solid black;
  /*@media screen and (max-width: 46.9375rem), screen and (max-height: 599px){
    border-top: none;
    border-bottom: none;
    margin-bottom: 2rem;
  }*/
}
.bildBlock .bildunterschrift.whiteText .inner {
  border-top-color: white;
  border-bottom-color: white;
}

#aboutNav {
  position: fixed;
  left: 1.2rem;
  bottom: 1rem;
  z-index: 2;
}
#aboutNav li {
  display: inline-block;
}
#aboutNav li a {
  width: 22px;
  height: 1em;
  padding: 3px 2px 1px;
  display: block;
  box-sizing: content-box;
  border: 2px solid transparent;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}
#aboutNav li a.active {
  border-color: black;
}
#aboutNav li a:hover {
  border-color: var(--c1);
}
#aboutNav li .nextSectionTitle {
  position: fixed;
  background: var(--bg);
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 1rem;
  color: var(--c1);
  transition-duration: 0.4s;
  opacity: 0;
}
#aboutNav li:hover .nextSectionTitle {
  opacity: 1;
}

.sticky {
  position: sticky;
}

.work h1 {
  border-top: 2px solid black;
  border-bottom: 4px solid black;
  padding: 0.5rem 1rem 0.25rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work h1 {
    margin-bottom: 1rem;
  }
}
.work #filtersWrapper {
  width: 100%;
  z-index: 3;
  background: var(--bg);
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work #filtersWrapper {
    top: calc(var(--headerHeight) - 1px);
  }
}
.work .filters {
  margin-right: -1px;
  background: var(--bg);
  padding: 0.5rem 0 1.5rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .filters {
    padding: 0;
    margin-right: 0;
    max-height: 40px;
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .work .filters.open {
    max-height: 50vh;
  }
}
@media screen and (max-width: 46.9375rem) and (max-width: 46.9375rem), screen and (max-width: 46.9375rem) and (max-height: 599px), screen and (max-height: 599px) and (max-width: 46.9375rem), screen and (max-height: 599px) and (max-height: 599px) {
  .work .filters.open button .plusToOpen {
    transform: translateY(-50%) rotate(45deg);
  }
}
.work .filters li {
  max-width: 32.7%;
  flex: 0 1 32.7%;
  border-bottom: 1px solid black;
  transition: border 0.2s ease-in-out, order 0.4s ease-in-out;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .filters li {
    flex: 0 1 100%;
    max-width: 100%;
    border-bottom-width: 2px;
  }
  .work .filters li:last-child {
    border-bottom: none;
  }
}
.work .filters li.fill {
  border-bottom-color: transparent;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .filters li.fill {
    display: none;
  }
}
.work .filters li button {
  background: none;
  padding: 7px 10px 5px;
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid transparent;
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  width: 100%;
  text-align: left;
  position: relative;
}
.work .filters li button .plusToOpen {
  display: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .filters li button {
    text-align: center;
    padding: 9px 10px 7px;
  }
}
.work .filters li button:focus {
  outline: none;
}
.work .filters li.active button, .work .filters li:hover button {
  background: black;
  color: white;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .filters li.active button .plusToOpen {
    display: block;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .filters li.active {
    order: -1;
  }
}
.work .weine {
  transition: opacity 0.2s ease-in-out;
  padding-bottom: 3rem;
}
.work .weine.oneGap:after {
  content: "";
  flex: auto;
  max-width: 32.7%;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .weine.oneGap:after {
    display: none;
  }
}
.work .weine.fadeOut {
  opacity: 0;
}
.work .wein {
  max-width: 32.7%;
  flex: 0 1 32.7%;
  margin-bottom: 22px;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .wein {
    max-width: 100%;
    margin-bottom: 1rem;
  }
}
.work .wein.hide {
  display: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .wein.fill {
    display: none;
  }
}
.work .wein .lage {
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid black;
  display: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .wein .lage {
    margin-top: 4.5rem;
    margin-bottom: 13px;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .wein.first .lage {
    margin-top: 0;
  }
}
.work .wein .imageWrapper {
  position: relative;
}
.work .wein .imageWrapper img {
  display: block;
}
.work .wein .imageWrapper .flasche {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 95%;
  object-fit: contain;
  pointer-events: none;
}
@media screen and (max-width: 75.25rem) {
  .work .wein .imageWrapper .flasche {
    opacity: 1;
  }
}
.work .wein .imageWrapper .oetw {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  width: 40px;
  height: auto;
}
@media screen and (max-width: 75.25rem) {
  .work .wein .imageWrapper .oetw {
    opacity: 1;
  }
}
.work .wein h2 {
  padding-bottom: 14px;
  border-bottom: 2px solid black;
  margin: 15px 0 0;
  position: relative;
}
.work .wein h2 .subtitle {
  min-height: 2em;
  margin-top: 3px;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .work .wein h2 .subtitle {
    min-height: 0;
  }
}
.work .wein .title {
  top: 1rem;
}
.work .wein:hover .flasche,
.work .wein:hover .oetw {
  opacity: 1;
}
.work .wein.alwaysShow .imageWrapper .flasche,
.work .wein.alwaysShow .imageWrapper .oetw {
  opacity: 1;
}
.work.showLagenweine .weine {
  padding-top: 30px;
}
.work.showLagenweine .weine .wein .lage {
  display: block;
}
.work {
  /*
  @media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
    .content {
      opacity: 0;
    }

    &.pace-done {
      .content {
        opacity: 1;
        transition: opacity 0.4s ease-in-out 0.4s;
      }
    }
  }

   */
}

.about .content {
  background: var(--bg);
  overflow-x: hidden;
}
.about .textBlock,
.about .bildBlock {
  margin-bottom: 7rem;
}
@media screen and (max-width: 75.25rem) {
  .about .textBlock,
  .about .bildBlock {
    margin-bottom: 3rem;
  }
}
.about .textBlock {
  position: relative;
}
.about .textBlock .textWrapper p:not(:last-child) {
  margin-bottom: 1em;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .about .textBlock .textWrapper {
    position: static;
    transform: none;
    padding: 0;
    height: auto;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .about .textBlock .textWrapper .maxWidth {
    transform: none;
  }
}
.about .maxWidth {
  width: 60%;
  max-width: 33ch;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 75.25rem) {
  .about .maxWidth {
    width: 75%;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .about .maxWidth {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.about .scrollInText {
  background: var(--bg);
  padding: 0 10px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 1;
}
.about .scrollInText.linksNachRechts {
  left: 0;
}
.about .scrollInText.linksNachRechts.animateText {
  transform: translate(100vw, -50%);
}
.about .scrollInText.rechtsNachLinks {
  right: 0;
  left: auto;
}
.about .scrollInText.rechtsNachLinks.animateText {
  transform: translate(-100vw, -50%);
}
.about .scrollInText.unten.rechtsNachLinks {
  top: 100%;
  transform: translate(100%, -50%) rotate(30deg);
}
.about .scrollInText.unten.rechtsNachLinks.animateText {
  transform: translate(-100vw, -50%) rotate(30deg);
}
.about .scrollInText.unten.linksNachRechts {
  top: 100%;
  transform: translate(-100%, -50%) rotate(-30deg);
}
.about .scrollInText.unten.linksNachRechts.animateText {
  transform: translate(100vw, -50%) rotate(-30deg);
}
.about .scrollInText.oben.rechtsNachLinks {
  top: 0;
  transform: translate(100%, -50%) rotate(-30deg);
}
.about .scrollInText.oben.rechtsNachLinks.animateText {
  transform: translate(-100vw, -50%) rotate(-30deg);
}
.about .scrollInText.oben.linksNachRechts {
  top: 0;
  transform: translate(-100%, -50%) rotate(30deg);
}
.about .scrollInText.oben.linksNachRechts.animateText {
  transform: translate(100vw, -50%) rotate(30deg);
}
.about .scrollInText .inner {
  position: relative;
}
.about .scrollInText {
  display: block;
  position: static;
  text-align: center;
  margin-bottom: 3rem;
  transition: none;
}
.about .lagenkarte {
  position: relative;
  overflow: hidden;
  margin-bottom: 8rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .about .lagenkarte {
    height: auto;
  }
}
.about .lagenkarte hr {
  width: calc(100% - 2.3rem);
  margin: 0 auto;
  height: 2px;
  background: black;
  border: none;
}
.about .lagenkarte .lagen-overlay {
  fill: transparent;
  cursor: pointer;
}
.about .lagenkarte .showBodenprofil .fillPoly {
  fill: red;
}
.about .lagenkarte .lagenkarteWrapper {
  width: 100%;
  height: 62.8vw;
  overflow: hidden;
}
.about .lagenkarte .lagenkarteWrapper .lage {
  position: absolute;
}
.about .lagenkarte .lagenkarteWrapper .boden-filled {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  will-change: opacity;
}
.about .lagenkarte .lagenkarteWrapper .boden-filled.show {
  opacity: 1;
}
.about .lagenkarte svg {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.about .lagenkarte svg .fillPoly {
  position: relative;
}
.about .lagenkarte svg .fillPoly::before {
  content: " ";
  width: 100%;
  height: 100%;
  display: block;
  background-color: blue;
  background-size: cover;
}
.about .lagenkarte svg .filled {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.about .lagenkarte svg .filled.show {
  opacity: 1;
}
.about .lagenkarte .lagePreview {
  display: none;
  padding-left: 1rem;
  padding-right: 1rem;
  max-height: 0;
  transition: 0.3s ease-in-out;
  overflow: hidden;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .about .lagenkarte .lagePreview {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
}
.about .lagenkarte .lagePreview.first, .about .lagenkarte .lagePreview.open {
  max-height: 100dvh;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .about .lagenkarte .lagePreview.open {
    margin-top: 1rem;
  }
}
.about .lagenkarte .lagePreview .outline {
  position: relative;
}
.about .lagenkarte .lagePreview .outline .gefuellt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}
.about .lagenkarte .lagePreview h2 {
  margin-top: 1.5rem;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 0.5rem 0 0.3rem;
  position: relative;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .about .lagenkarte .lagePreview h2 {
    margin-top: 0;
  }
}
.about .lagenkarte .lagePreview.show .gefuellt {
  opacity: 0;
}
.about .lagenkarte .lagePreview.show .ungefuellt {
  display: block;
}
.about .lagenkarte .lagePreview.show h2 .plusToOpen {
  opacity: 0;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .about section.last {
    padding-bottom: 3.7rem;
    margin-bottom: 0;
  }
}
.about .appendedImg {
  margin-bottom: 2rem;
}

.lagenUebersichtMobil {
  padding: 0 1rem;
  margin-bottom: 2rem;
  display: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .lagenUebersichtMobil {
    display: block;
  }
}
.lagenUebersichtMobil img.outline,
.lagenUebersichtMobil .hoefleinMobil {
  border-top: 2px solid black;
  border-bottom: 4px solid black;
  padding: 1rem 0;
}
.lagenUebersichtMobil .lagenkarteHeadline {
  margin-bottom: 1em;
}

.lageDetails {
  position: absolute;
  top: 5rem;
  right: 1.5rem;
  width: 60%;
  max-height: 80%;
  transform: translateY(150%);
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  background: white;
  border: 2px solid black;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.lageDetails.detailsLinks {
  left: 1.5rem;
  right: auto;
}
@media screen and (max-width: 75.25rem) {
  .lageDetails {
    width: 60%;
    top: 5.5rem;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .lageDetails {
    position: static;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
    transform: none;
    border: none;
    background: none;
  }
}
.lageDetails.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .lageDetails.show {
    transform: none;
    max-height: 500vh;
  }
}
.lageDetails .imageContainer {
  left: 0;
  bottom: 0;
  flex: 0 1 7.5rem;
  min-width: 7.5rem;
  border-right: 2px solid black;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .lageDetails .imageContainer {
    margin-top: 0;
    margin-bottom: 1rem;
    border-right: none;
    border-top: 1px solid black;
    border-bottom: 2px solid black;
    height: 58vw;
  }
}
.lageDetails .imageContainer img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .lageDetails .imageContainer img {
    height: auto;
    object-fit: initial;
  }
}
.lageDetails .beschreibung h1 {
  border-bottom: 2px solid black;
  padding: 0.75rem 2rem 0.5rem;
}
.lageDetails .beschreibung p:not(:last-child) {
  margin-bottom: 1em;
}
.lageDetails .beschreibung .anbau {
  margin-top: 2.75rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .lageDetails .beschreibung .anbau {
    margin-top: 0;
  }
}
.lageDetails .beschreibung .anbau h3 {
  margin-bottom: 1px;
}
.lageDetails .beschreibung .kollektion h3 {
  margin-bottom: 10px;
  border-bottom: 2px solid black;
  padding-bottom: 2px;
}
.lageDetails .beschreibung .close {
  position: absolute;
  top: 7px;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  padding: 1rem;
}
.lageDetails .beschreibung .close svg {
  width: 0.75rem;
  height: 0.75rem;
  border: none;
}
.lageDetails .beschreibung .close line {
  stroke: #000;
  stroke-linejoin: round;
  stroke-width: 1.4px;
  transition: stroke 0.2s ease-in-out;
}
.lageDetails .beschreibung .close:hover line {
  stroke: var(--c1);
}
.lageDetails .beschreibung .scroll {
  padding: 1rem 2rem 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lageDetails .beschreibung .scroll > *:last-child {
  margin-bottom: 7rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .lageDetails .beschreibung .scroll {
    overflow-y: initial;
    padding: 0;
  }
  .lageDetails .beschreibung .scroll > *:last-child {
    margin-bottom: 0;
  }
}

.alleLagenButton {
  background: black;
  width: 100%;
  color: white;
  margin-top: 2rem;
  padding: 0.5rem 0 0.4rem;
  position: relative;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
  overflow: hidden;
}
.alleLagenButton.hide {
  max-height: 0;
  padding: 0;
  margin: 0;
}

.single-wein .content {
  margin: calc(var(--headerHeight) * 1.2) auto 0;
  width: calc(100% - 2.3rem);
  height: calc(100dvh - var(--headerHeight) * 1.2 - 0.5rem);
  position: relative;
}
.single-wein .content .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .content .grid {
    grid-template-columns: 1fr;
  }
}
.single-wein .content .grid .header,
.single-wein .content .grid .center,
.single-wein .content .grid .bottom {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .content {
    height: auto;
    width: 100%;
    padding: 0 1rem;
  }
}
.single-wein .left,
.single-wein .right {
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .left,
  .single-wein .right {
    max-width: 100%;
  }
}
.single-wein .header {
  min-height: 6.5rem;
  transition: opacity 0.2s ease-in-out;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .header {
    min-height: auto;
    padding-bottom: 0.5rem;
  }
}
.single-wein .center {
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  position: relative;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .center {
    border-bottom: none;
  }
}
.single-wein .bottom {
  flex: 0 1 3rem;
  min-height: 3rem;
}
.single-wein .bottom .right,
.single-wein .bottom .right .left {
  overflow: visible;
}
.single-wein .buttonsBlock {
  padding: 0.5rem 0;
  background: var(--bg);
  margin-top: -4px;
  border-top: 4px solid black;
}
@media screen and (max-width: 400px) {
  .single-wein .buttonsBlock {
    display: flex;
    flex-direction: column;
  }
}
.single-wein .buttonsBlock .left {
  display: inline-flex;
  align-items: center;
  flex: 0 1 20%;
  text-align: left;
}
@media screen and (max-width: 400px) {
  .single-wein .buttonsBlock .left {
    flex: 0 1 100%;
    justify-content: center;
    padding: 0.5rem;
  }
}
.single-wein .buttonsBlock .right {
  flex: 0 1 80%;
  text-align: right;
}
@media screen and (max-width: 400px) {
  .single-wein .buttonsBlock .right {
    flex: 0 1 100%;
    text-align: center;
    padding: 0.5rem;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .positionStickyBottom {
    display: block;
    position: sticky;
    bottom: 0;
  }
}
.single-wein .smartphoneSlogan {
  border-top: 2px solid black;
  border-bottom: 4px solid black;
  padding: 0.9rem 0 0.8rem;
}
.single-wein .middleline {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 2px;
  background: black;
}
@media screen and (min-width: 1101px) {
  .single-wein .details .middleline {
    display: block;
  }
}
.single-wein .imageContainer {
  position: absolute;
  inset: 0;
  height: 100%;
  padding-top: 2rem;
  background-position: top left;
  background-repeat: repeat;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .imageContainer {
    position: relative;
    padding-top: 1rem;
    border-bottom: 4px solid black;
  }
}
.single-wein .imageContainer img {
  object-fit: contain;
  height: 100%;
  display: block;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .imageContainer img {
    object-fit: initial;
    height: 55vh;
    max-height: none;
    width: auto;
    margin: 0 auto;
  }
}
.single-wein .imageContainer .oetw {
  position: absolute;
  right: 50%;
  left: calc(50% - 70px);
  top: 4rem;
  width: 40px;
  height: auto;
  transform: translate(-50%, -50%);
}
.single-wein .switchContent {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: white;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .switchContent {
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .showDetails .beschreibung,
  .single-wein .showAwards .beschreibung {
    opacity: 0;
    max-height: 0;
    padding: 0;
    transition: opacity 0.3s ease-in-out;
  }
}
.single-wein .scrollContainer {
  height: 100%;
  overflow-y: auto;
  padding: 2.5rem 3rem;
  position: relative;
  transition: opacity 0.3s ease-in-out, transform 0.4s ease-in-out;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .scrollContainer {
    padding: 1.5rem 0;
  }
}
.single-wein .scrollContainer p:not(:last-child) {
  margin-bottom: 1em;
}
.single-wein .scrollContainer section:not(:last-child) {
  padding-bottom: 1em;
}
.single-wein .slideUp {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform 0.4s ease-in-out;
  background-color: white;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .slideUp {
    transform: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    height: auto;
    bottom: auto;
  }
}
.single-wein .showDetailsButton .step2 {
  display: none;
}
.single-wein .weinname,
.single-wein .slogan {
  overflow: visible;
  padding: 0 0.5em;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .weinname,
  .single-wein .slogan {
    padding: 0;
  }
}
.single-wein .weinname .subtitle {
  margin-top: 5px;
  min-height: 34px;
}
.single-wein .awardsButton {
  background: black;
  color: white;
  border-radius: 50%;
  height: 4.75em;
  width: 4.75em;
  border: 3px solid black;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translate(-53%, -50%);
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out, opacity 0.3s ease-in-out;
}
.single-wein .awardsButton:hover {
  background: white;
  color: black;
}
.single-wein .awardsButton.hide {
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .awardsButton {
    left: auto;
    right: 0;
    top: 1rem;
    transform: scale(0.7);
    transform-origin: top right;
  }
  .single-wein .awardsButton:hover {
    background: black;
    color: white;
  }
}
.single-wein .awards li {
  padding-bottom: 0.5em;
  border-bottom: 2px solid black;
  margin-bottom: 0.5em;
}
.single-wein .datenblaetter li {
  display: inline-block;
}
.single-wein .showDetails .details {
  transform: translateY(0);
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .showDetails .details {
    opacity: 1;
    pointer-events: auto;
    max-height: 500vh;
    position: relative;
  }
}
.single-wein .showDetails .showDetailsButton .step1 {
  display: none;
}
.single-wein .showDetails .showDetailsButton .step2 {
  display: block;
}
.single-wein .showAwards .awards {
  transform: translateY(0);
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .single-wein .showAwards .awards {
    opacity: 1;
    pointer-events: auto;
    max-height: 500vh;
    position: relative;
  }
}
.single-wein .showAwards .awardsButton {
  background: white;
  color: black;
}
.single-wein .weinflasche {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}
.single-wein .weinControls {
  position: absolute;
  width: 35%;
  height: 100%;
  top: 0;
}
.single-wein .weinControls.prev {
  left: 0;
}
.single-wein .weinControls.prev svg {
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 75.25rem) {
  .single-wein .weinControls.prev svg {
    left: 0.5rem;
    transform: translate(0, -50%);
  }
}
.single-wein .weinControls.next {
  right: 0;
}
.single-wein .weinControls.next svg {
  left: auto;
  right: 50%;
  transform: translate(50%, -50%);
}
@media screen and (max-width: 75.25rem) {
  .single-wein .weinControls.next svg {
    right: 0.5rem;
    transform: translate(0, -50%);
  }
}
.single-wein .weinControls svg {
  height: 1rem;
  width: 2rem;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
}
.single-wein .weinControls svg path {
  transition: fill 0.15s ease-in-out;
}
.single-wein .weinControls:hover path {
  fill: var(--c1);
}
.single-wein .prevImage,
.single-wein .nextImage,
.single-wein .prevDesc,
.single-wein .nextDesc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: transform 0.4s ease-in-out, opacity 0.5s ease-in-out;
}
.single-wein .prevImage,
.single-wein .prevDesc {
  transform: translateX(-100%);
}
.single-wein .nextImage,
.single-wein .nextDesc {
  transform: translateX(100%);
}
.single-wein.changeWein .weinflasche,
.single-wein.changeWein .preis,
.single-wein.changeWein .content .header {
  opacity: 0;
}
.single-wein.changeWein.showNext .nextImage,
.single-wein.changeWein.showNext .nextDesc {
  opacity: 1;
  transform: translateX(0);
}
.single-wein.changeWein.showNext .switchContent .beschreibung {
  opacity: 0;
  transform: translateX(-100%);
}
.single-wein.changeWein.showPrev .prevImage,
.single-wein.changeWein.showPrev .prevDesc {
  opacity: 1;
  transform: translateX(0);
}
.single-wein.changeWein.showPrev .switchContent .beschreibung {
  opacity: 0;
  transform: translateX(100%);
}
.single-wein.changeWein.changeWeinDone .preis,
.single-wein.changeWein.changeWeinDone .content .header {
  opacity: 1;
}

.contact .adresse {
  margin-bottom: 1em;
}
.contact .telefonnummern {
  margin: 1em 0;
}
.contact .socialMedia {
  margin: 1.5em 0;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .contact .socialMedia {
    margin: 1em 0;
  }
}
.contact .socialMedia li {
  display: inline-block;
  margin: 0 0.15em;
}
.contact .socialMedia img {
  height: 0.85em;
  width: auto;
  display: block;
}
.contact .newsletter p,
.contact .impressumLink p {
  margin-top: 0.75em;
}
.contact .newsletter,
.contact .impressumLink {
  margin-bottom: 2em;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .contact .newsletter {
    margin-bottom: 1em;
  }
}

.impressum-datenschutz .content {
  width: 50ch;
  max-width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  text-align: left;
}
.impressum-datenschutz .content h1,
.impressum-datenschutz .content h2,
.impressum-datenschutz .content h3 {
  margin-top: 2em;
  margin-bottom: 1em;
  text-align: center;
}
.impressum-datenschutz .content h1:first-child,
.impressum-datenschutz .content h2:first-child,
.impressum-datenschutz .content h3:first-child {
  margin-top: 0;
}
.impressum-datenschutz .content p:not(:last-child) {
  margin-bottom: 1em;
}

.twoColumns {
  column-count: 2;
  column-gap: 4rem;
}
@media screen and (max-width: 1100px) {
  .twoColumns {
    column-count: 1;
  }
}
.twoColumns section {
  page-break-inside: avoid;
  break-inside: avoid;
}

.plus {
  display: inline-block;
  transform: translateY(-10%);
}

.press .list,
.distribution .list,
.events .list {
  flex: 0 1 64%;
  max-width: 64%;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .press .list,
  .distribution .list,
  .events .list {
    max-width: 100%;
    margin-bottom: 2rem;
  }
}
.press .preview,
.distribution .preview,
.events .preview {
  flex: 0 1 30%;
  max-width: 30%;
  margin-top: -2px;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .press .preview,
  .distribution .preview,
  .events .preview {
    display: none;
  }
}
.press .preview img,
.distribution .preview img,
.events .preview img {
  display: none;
  border: 2px solid black;
}
.press .preview img.active, .press .preview img.preactive,
.distribution .preview img.active,
.distribution .preview img.preactive,
.events .preview img.active,
.events .preview img.preactive {
  display: block;
}
.press h1,
.distribution h1,
.events h1 {
  border-bottom: 2px solid black;
  margin-bottom: 1.5em;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .press h1,
  .distribution h1,
  .events h1 {
    border-top: 2px solid black;
    border-bottom: 4px solid black;
    text-align: center;
    font-size: 14vw;
    padding: 4px 0 2px;
  }
}
.press main ul li,
.distribution main ul li,
.events main ul li {
  max-height: 3.7em;
  transition: max-height 0.4s ease-in-out;
  overflow: hidden;
  margin-top: -1px;
}
@media screen and (min-width: 46.9375rem), screen and (min-height: 599px) {
  .press main ul li:hover h2,
  .distribution main ul li:hover h2,
  .events main ul li:hover h2 {
    color: var(--c1);
  }
}
@media screen and (max-width: 75.25rem) {
  .press main ul li,
  .distribution main ul li,
  .events main ul li {
    max-height: 2.95em;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .press main ul li,
  .distribution main ul li,
  .events main ul li {
    max-height: none;
    margin-top: -2px;
  }
}
.press main ul li.active, .press main ul li.preactive,
.distribution main ul li.active,
.distribution main ul li.preactive,
.events main ul li.active,
.events main ul li.preactive {
  max-height: 300em;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .press main ul li.active, .press main ul li.preactive,
  .distribution main ul li.active,
  .distribution main ul li.preactive,
  .events main ul li.active,
  .events main ul li.preactive {
    max-height: none;
  }
  .press main ul li.active .anleser, .press main ul li.preactive .anleser,
  .distribution main ul li.active .anleser,
  .distribution main ul li.preactive .anleser,
  .events main ul li.active .anleser,
  .events main ul li.preactive .anleser {
    max-height: 400vh;
    margin: 1em 0;
  }
  .press main ul li.active.preactive h2 .plusToOpen, .press main ul li.preactive.preactive h2 .plusToOpen,
  .distribution main ul li.active.preactive h2 .plusToOpen,
  .distribution main ul li.preactive.preactive h2 .plusToOpen,
  .events main ul li.active.preactive h2 .plusToOpen,
  .events main ul li.preactive.preactive h2 .plusToOpen {
    opacity: 1;
  }
  .press main ul li.active.preactive .anleser, .press main ul li.preactive.preactive .anleser,
  .distribution main ul li.active.preactive .anleser,
  .distribution main ul li.preactive.preactive .anleser,
  .events main ul li.active.preactive .anleser,
  .events main ul li.preactive.preactive .anleser {
    max-height: 0;
    margin: 0;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .press main ul li.active h2, .press main ul li.preactive h2,
  .distribution main ul li.active h2,
  .distribution main ul li.preactive h2,
  .events main ul li.active h2,
  .events main ul li.preactive h2 {
    border-top-width: 2px;
    border-bottom-width: 2px;
  }
  .press main ul li.active h2 .plusToOpen, .press main ul li.preactive h2 .plusToOpen,
  .distribution main ul li.active h2 .plusToOpen,
  .distribution main ul li.preactive h2 .plusToOpen,
  .events main ul li.active h2 .plusToOpen,
  .events main ul li.preactive h2 .plusToOpen {
    opacity: 0;
  }
}
.press main ul h2,
.distribution main ul h2,
.events main ul h2 {
  border-bottom: 2px solid black;
  padding: 0.25em 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .press main ul h2,
  .distribution main ul h2,
  .events main ul h2 {
    padding: 0.3em 0 0.2em;
    position: relative;
  }
}
.press main ul .anleser,
.distribution main ul .anleser,
.events main ul .anleser {
  margin: 1em 0;
  padding: 0 1em;
}
.press main ul .anleser p,
.distribution main ul .anleser p,
.events main ul .anleser p {
  display: inline;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .press main ul .anleser,
  .distribution main ul .anleser,
  .events main ul .anleser {
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, margin 0.4s ease-in-out;
  }
}

.events .list {
  flex: 0 1 100%;
  max-width: 100%;
}
.events .list .anleser {
  max-width: 64%;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .events .list .anleser {
    max-width: 100%;
  }
}
.events .list .meta {
  display: flex;
  margin: 0 0 1em -0.65em;
}
.events .list .meta .datum {
  border-right: 2px solid #000;
  padding: 1rem 1rem 0.5rem 0;
}
.events .list .meta .ort {
  padding: 1rem 0.5rem 0.5rem 1rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .events .list .meta {
    display: block;
    margin: 0 0 1rem;
  }
  .events .list .meta .datum {
    border-right: none;
    padding: 0;
  }
  .events .list .meta .ort {
    padding: 0;
  }
}

.plusToOpen {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
  opacity: 1;
  width: 0.7rem;
  border: none !important;
}
.plusToOpen.white {
  filter: brightness(0.01) invert(1);
  right: 0.5rem;
}

.nextSection {
  overflow: hidden;
  z-index: 1;
}
.nextSection .arrow {
  display: block;
  margin: 0 auto 1rem;
  padding: 1.5rem 0;
  width: 1.73rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .nextSection .arrow {
    width: 1.5rem;
  }
}
.start .nextSection {
  bottom: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.start .nextSection .arrow {
  animation: scrollDownAnimation 4s;
  animation-iteration-count: infinite;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .start .nextSection .arrow {
    animation: none;
  }
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .start .nextSection {
    position: relative;
  }
}

.overlay {
  display: block;
  border-top: 2px solid black;
  width: calc(100% - 2.3rem);
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  z-index: 1;
  padding: 0.75rem 0.75rem 1rem;
}
.overlay a {
  display: block;
}
.overlay.hidden {
  opacity: 0 !important;
  pointer-events: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .overlay {
    position: static;
    width: calc(100% - 2rem);
    margin-top: -0.5rem;
    padding-left: 0;
    padding-right: 0;
  }
  .overlay .nextKategory,
  .overlay .subtitle {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .overlay .nextKategory {
    display: block;
    border-bottom: 2px solid black;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
  }
  .overlay .subtitle br {
    display: none;
  }
  .start .overlay {
    display: block !important;
    margin-top: -2rem;
  }
}

@starting-style {
  .fadeClass {
    opacity: 0;
  }
}
.fadeClass {
  transition: opacity 0.2s ease-in-out;
  /*
  &.show,
  .pace-done &#intro,
  .contact.pace-done &.content,
  .press.pace-done &.content,
  .distribution.pace-done &.content {
    pointer-events: auto;
    opacity: 1;
  }

   */
}
.fadeClass.slow {
  transition-duration: 0.6s;
}

.pace {
  pointer-events: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: var(--c1);
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .pace .pace-progress {
    display: none;
  }
}

::selection {
  color: black;
  background: var(--c1);
}

.imageOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--bg);
  z-index: 3;
  cursor: pointer;
}
.imageOverlay img {
  margin: 10%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  pointer-events: none;
}

.dot {
  display: inline-block;
  transform: scale(1.7) translateY(-6%);
  margin: 0 0.1em;
}
.scrollInText .dot {
  transform: scale(1.1) translateY(-6%);
  margin: 0;
}
.dot.moreMargin {
  margin-left: 0.3em;
  margin-right: 0.3em;
}

.inlineArrow {
  height: 0.55em;
  width: 0.8em;
  margin-right: 3px;
  transform: translateY(-1px);
}
.inlineArrow path {
  transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 0.35px;
}

.pdfLink {
  display: inline-block;
  margin-left: 5px;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .pdfLink {
    display: block;
    margin-top: 0.8em;
  }
}

.smartphoneOnly {
  display: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .smartphoneOnly {
    display: initial;
  }
}

.tabletAndBelow {
  display: none;
}
@media screen and (max-width: 75.25rem) {
  .tabletAndBelow {
    display: initial;
  }
}

@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .hideOnSmartphone {
    display: none !important;
  }
}

@media screen and (max-width: 75.25rem) {
  .hideOnTablet {
    display: none;
  }
}

.hideOnDesktop {
  display: none;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .hideOnDesktop {
    display: block;
  }
}

.introOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 100dvh;
  background: var(--bg);
  opacity: 1;
  display: none;
  font-size: 5rem;
  transition: 0.5s ease-in-out 0.2s;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .introOverlay {
    display: flex;
    font-size: 2.5rem;
  }
}
@media screen and (max-height: 37.5rem), screen and (max-height: 399px) {
  .introOverlay {
    font-size: 3rem;
  }
}
.pace-done .introOverlay {
  opacity: 0;
  pointer-events: none;
}

.scrollDown {
  position: absolute;
  bottom: 4rem;
  height: 5rem;
  padding: 1rem;
  animation: scrollDownAnimation 4s;
  animation-iteration-count: infinite;
}
.scrollDown .arrow {
  height: 100%;
  width: auto;
}

@keyframes scrollDownAnimation {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(20%);
  }
}
.distribution .list {
  max-width: 100%;
  column-count: 2;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .distribution .list {
    column-count: 1;
  }
}
.distribution .list li {
  page-break-inside: avoid;
  break-inside: avoid;
  border-bottom: 2px solid black;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .distribution .list li {
    border-bottom: none;
  }
}
.distribution .list li .anleser {
  opacity: 0;
  transition: 0.2s ease-in-out;
  pointer-events: none;
}
.distribution .list li.active .anleser, .distribution .list li.preactive .anleser {
  opacity: 1;
  transition-delay: 0.2s;
  pointer-events: auto;
}
.distribution .partner:not(:first-child) {
  margin-top: 1em;
}

.slideUpContent {
  position: fixed;
  height: 100dvh;
  width: 100%;
  top: 0;
  translate: 0 100%;
  background: var(--bg);
  z-index: 11;
  transition: translate 0.5s ease-in-out;
  overflow-y: scroll;
  overflow-x: hidden;
}
.slideUpContent--open {
  translate: 0 0;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  .slideUpContent {
    position: relative;
    height: auto;
    width: auto;
    bottom: auto;
    z-index: 1;
  }
}
.slideUpContent .close {
  position: absolute;
  display: block;
  top: -1.2rem;
  right: 1.5rem;
  font-size: 4rem;
}

#events {
  padding: 2rem;
}
@media screen and (max-width: 46.9375rem), screen and (max-height: 599px) {
  #events {
    padding: 0;
    margin: 4rem 0;
  }
}
#events .scrollInText {
  margin: 0 0 1rem;
}
#events .scrollInText .inner {
  position: relative;
}
#events .datum {
  text-transform: uppercase;
}

.cover {
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: -1rem;
  bottom: -0.5rem;
  background: var(--bg);
  z-index: 2;
}

.eventLinks {
  margin: 2rem 0;
}
.eventLinks__link {
  text-transform: uppercase;
  font-weight: 700;
}
.eventLinks__link .arrow {
  width: 1.2rem;
  height: auto;
  margin: 0 0.5rem 0 0;
}

.price-amount-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1rem;
}
.price-amount-wrapper.align-center {
  align-items: center;
}
.price-amount-wrapper .amount {
  margin: 0 1rem 0 auto;
}

details summary {
  list-style: none;
  border-bottom: 2px solid black;
  padding: 0.25em 0;
  cursor: pointer;
}
details summary::-webkit-details-marker {
  display: none;
}

::details-content {
  transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
  height: 0;
  overflow: clip;
  padding-inline: 1em;
}

[open]::details-content {
  height: auto;
  margin-bottom: 2rem;
}

/*# sourceMappingURL=main.css.map */