/* BERINGER – SCHLANKER HEADER UND NATURMENÜ */

#beringer-nav,
#beringer-nav *,
#beringer-rollo-layer,
#beringer-rollo-layer *,
#beringer-rollo-backdrop {
  box-sizing: border-box;
}

#beringer-nav {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: #f5f3e9;
  border-bottom: 1px solid #dfddcf;
  position: relative;
  z-index: 100001;
}

#beringer-nav .beringer-bar {
  max-width: 1400px;
  min-height: 66px;
  padding: 0 25px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#beringer-nav .beringer-brand {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  text-decoration: none;
}

#beringer-nav .beringer-brand-name {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: #25452e;
  line-height: 1.2;
}

#beringer-nav .beringer-brand-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  color: #a77535;
  margin-top: 4px;
}

#beringer-nav .beringer-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

#beringer-nav .beringer-links a,
#beringer-nav .beringer-links button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #36523b;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  padding: 10px 0;
  margin: 0;
  cursor: pointer;
}

#beringer-nav .beringer-links a:hover,
#beringer-nav .beringer-links button:hover {
  color: #a77535;
}

#beringer-nav .beringer-links .beringer-shop {
  color: #a77535;
}

#beringer-nav .bn-arrow {
  display: inline-block;
  font-size: 19px;
  margin-left: 4px;
  line-height: 0;
  vertical-align: 1px;
  color: #a77535;
  transition: transform .25s;
}

#beringer-nav button[aria-expanded="true"] .bn-arrow {
  transform: rotate(180deg);
}

#beringer-nav .beringer-links .beringer-menu {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 16px;
  background: #294a34;
  border-radius: 30px;
  color: #fff;
}

#beringer-nav .beringer-links .beringer-menu:hover {
  background: #3c6244;
  color: #fff;
}

.beringer-menu-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.beringer-menu-icon i {
  display: block;
  width: 18px;
  height: 2px;
  background: #e7c184;
  border-radius: 2px;
}

/* ABDUNKLUNG */

#beringer-rollo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100002;
  background: rgba(23,42,27,.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s,visibility .35s;
}

#beringer-rollo-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* AUFKLAPPMENÜ */

#beringer-rollo-layer {
  position: fixed;
  top: var(--beringer-rollo-top,66px);
  left: 50%;
  width: min(760px,calc(100vw - 30px));
  z-index: 100003;
  transform: translateX(-50%);
  pointer-events: none;
}

#beringer-rollo-layer .beringer-rollo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: calc(100dvh - var(--beringer-rollo-top,66px) - 12px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 34px 42px 30px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.45),transparent 65%),
    #f4f1e7;
  border: 1px solid #ded8c7;
  border-top: 3px solid #b38a52;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 22px 55px rgba(24,45,29,.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-22px);
  transition:
    opacity .3s ease,
    transform .45s cubic-bezier(.22,1,.36,1),
    visibility .45s;
  pointer-events: none;
}

#beringer-rollo-layer .beringer-rollo::-webkit-scrollbar {
  display: none;
}

#beringer-rollo-layer .beringer-rollo.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* MENÜKOPF */

.beringer-rollo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.beringer-rollo-head > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  color: #a77b3e;
}

#beringer-rollo-layer .beringer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d8d1c0;
  background: #fffdf8;
  color: #294a34;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

#beringer-rollo-layer .beringer-close:hover {
  background: #294a34;
  color: #fff;
}

#beringer-rollo-layer .beringer-rollo h2 {
  font-family: Georgia,serif;
  font-size: clamp(27px,3.5vw,40px);
  font-weight: 400;
  line-height: 1.2;
  color: #294a34;
  margin: 0 0 24px;
  padding: 0;
}

#beringer-rollo-layer .beringer-rollo h2 em {
  color: #aa7d43;
  font-weight: 400;
}

/* LINKS */

.beringer-rollo-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 25px;
}

.beringer-rollo-grid > a,
.beringer-rollo-grid > span {
  display: block;
  min-width: 0;
  padding: 13px 8px 13px 0;
  color: #294a34;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid #d9d9ca;
}

.beringer-rollo-grid > a::before {
  content: "↗";
  color: #ae8246;
  margin-right: 9px;
}

.beringer-rollo-grid > a:hover {
  color: #a77535;
}

.beringer-rollo-grid > span {
  color: #92998e;
}

/* GESAMTES MENÜ */

.beringer-mobile-all {
  display: flex;
  flex-direction: column;
}

.beringer-mobile-all > a,
.beringer-mobile-all > span,
.beringer-mobile-all summary {
  display: block;
  position: relative;
  color: #294a34;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 4px;
  border-bottom: 1px solid #dcdccc;
  cursor: pointer;
}

.beringer-mobile-all > span {
  color: #959b91;
}

.beringer-mobile-all summary {
  list-style: none;
  padding-right: 35px;
}

.beringer-mobile-all summary::-webkit-details-marker {
  display: none;
}

.beringer-mobile-all .bn-plus {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  border: 1px solid #d2c5aa;
  border-radius: 50%;
  background: #fffdf8;
}

.beringer-mobile-all .bn-plus::before,
.beringer-mobile-all .bn-plus::after {
  content: "";
  position: absolute;
  background: #99703c;
}

.beringer-mobile-all .bn-plus::before {
  width: 9px;
  height: 1px;
  left: 6px;
  top: 10px;
}

.beringer-mobile-all .bn-plus::after {
  width: 1px;
  height: 9px;
  left: 10px;
  top: 6px;
}

.beringer-mobile-all details[open] .bn-plus::after {
  display: none;
}

.beringer-mobile-all details > div {
  display: flex;
  flex-direction: column;
  padding: 6px 0 12px 16px;
  background: rgba(223,228,212,.35);
}

.beringer-mobile-all details > div a,
.beringer-mobile-all details > div span {
  display: block;
  padding: 10px 8px;
  color: #46614b;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid #dedfd3;
}

.beringer-mobile-all details > div span {
  color: #92998e;
}

/* KONTAKTBEREICH */

.bn-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 20px;
  margin-top: 27px;
  padding-top: 18px;
  border-top: 1px solid #d8d5c7;
}

.bn-contact-label {
  width: 100%;
  color: #a77b3e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}

.bn-contact a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3e5943;
  text-decoration: none;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.bn-contact a:hover {
  color: #a77535;
}

.bn-contact svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: #b38a52;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* TABLET */

@media(max-width:1100px) {
  #beringer-nav .beringer-links > button:not(.beringer-menu),
  #beringer-nav .beringer-start {
    display: none;
  }
}

/* SMARTPHONE */

@media(max-width:767px) {
  #beringer-nav .beringer-bar {
    min-height: 62px;
    padding: 0 14px;
    gap: 10px;
  }

  #beringer-nav .beringer-brand-name {
    font-size: 16px;
  }

  #beringer-nav .beringer-brand-sub {
    font-size: 8px;
    letter-spacing: .08em;
  }

  #beringer-nav .beringer-links {
    gap: 12px;
  }

  #beringer-nav .beringer-menu-label {
    display: none;
  }

  #beringer-nav .beringer-links .beringer-menu {
    padding: 12px;
  }

  #beringer-rollo-layer .beringer-rollo {
    padding: 23px 21px 25px;
  }

  .beringer-rollo-grid {
    grid-template-columns: 1fr;
  }

  .bn-contact {
    gap: 12px;
  }

  .bn-contact a {
    font-size: 12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  #beringer-rollo-layer .beringer-rollo,
  #beringer-rollo-backdrop {
    transition: none;
  }
}