/* Public menu: grouped quantity/price variants and packshot handling. */

.bf-price--variants {
  display: grid;
  min-width: 6.6em;
  gap: 2px;
  border-radius: 12px;
}

.bf-price--unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .65em;
  border-radius: 12px;
  white-space: nowrap;
}

.bf-price--unit span {
  font-weight: 600;
  opacity: .9;
  text-align: right;
}

.bf-price--unit strong {
  font-weight: 800;
}

body:is(.slug-speisekarte, .slug-breakfast) .bf-price.bf-price--variants {
  font-size: calc(.75 * clamp(1.14rem, 1.23vw + .63rem, 1.31rem));
}

body:is(.slug-speisekarte, .slug-breakfast) .menu-compact .bf-price.bf-price--variants {
  font-size: calc(.75 * clamp(.95rem, .95vw + .48rem, 1.05rem));
}

body:is(.slug-speisekarte, .slug-breakfast) .bf-overlay-top {
  top: 0;
  right: 0;
}

body:is(.slug-speisekarte, .slug-breakfast) .bf-price {
  background: rgba(0, 0, 0, .51);
  border-top: 0;
  border-right: 0;
  border-radius: 0;
}

body:is(.slug-speisekarte, .slug-breakfast) .bf-card:not(.bf-card-extra) {
  border-radius: 18px 0 18px 18px;
}

body:is(.slug-speisekarte, .slug-breakfast) .menu-compact .bf-card:not(.bf-card-extra) {
  border-radius: 14px 0 14px 14px;
}

.bf-price-variant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .65em;
  line-height: 1.15;
  white-space: nowrap;
}

.bf-price-variant span {
  font-weight: 600;
  opacity: .9;
  text-align: right;
}

.bf-price-variant strong {
  font-weight: 800;
}

.menu-allergen-footer {
  margin-top: 1.2rem !important;
}

.menu-allergen-legend {
  padding: .9rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(230, 201, 143, .28);
  border-radius: .8rem;
}

.menu-allergen-legend h2 {
  margin: 0 0 .7rem;
  color: #e6c98f;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.3;
}

.menu-allergen-legend__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem .8rem;
}

.menu-allergen-legend__grid > span {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: baseline;
  color: rgba(255, 255, 255, .9);
  font-size: .78rem;
  line-height: 1.25;
}

.menu-allergen-legend__grid strong,
body:is(.slug-speisekarte, .slug-breakfast) .bf-allergen-inline .al-inline {
  color: #e6c98f;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.25;
}

body:is(.slug-speisekarte, .slug-breakfast) .bf-allergen-inline {
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-shadow: none;
}

body:is(.slug-speisekarte, .slug-breakfast) .menu-allergen-trigger {
  min-height: 0;
  padding: 2px 6px;
  color: #e6c98f;
  background: rgba(0, 0, 0, .72);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  vertical-align: baseline;
  -webkit-appearance: none;
  appearance: none;
}

body:is(.slug-speisekarte, .slug-breakfast) .menu-allergen-trigger:hover,
body:is(.slug-speisekarte, .slug-breakfast) .menu-allergen-trigger[aria-expanded="true"] {
  background: rgba(0, 0, 0, .78);
}

body:is(.slug-speisekarte, .slug-breakfast) .menu-allergen-trigger:focus-visible {
  outline: 2px solid #f4d99f;
  outline-offset: 2px;
}

body:is(.slug-speisekarte, .slug-breakfast) .bf-allergen-inline .al-paren {
  opacity: 1;
}

body:is(.slug-speisekarte, .slug-breakfast) .bf-allergen-inline .al-letters {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.menu-allergen-popover {
  --menu-allergen-arrow-left: 50%;
  position: fixed;
  z-index: 10030;
  width: min(20rem, calc(100vw - 1.5rem));
  max-height: min(24rem, calc(100dvh - 1.5rem));
  padding: .8rem;
  overflow-y: auto;
  color: #fff8eb;
  background: linear-gradient(145deg, #292116, #12100d 72%);
  border: 1px solid rgba(230, 201, 143, .72);
  border-radius: .85rem;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255, 255, 255, .08);
  font-family: inherit;
}

.menu-allergen-popover[hidden] {
  display: none;
}

.menu-allergen-popover::before {
  position: absolute;
  left: var(--menu-allergen-arrow-left);
  width: .72rem;
  height: .72rem;
  content: "";
  background: #241d14;
  border: solid rgba(230, 201, 143, .72);
  transform: translateX(-50%) rotate(45deg);
}

.menu-allergen-popover[data-placement="below"]::before {
  top: -.42rem;
  border-width: 1px 0 0 1px;
}

.menu-allergen-popover[data-placement="above"]::before {
  bottom: -.42rem;
  border-width: 0 1px 1px 0;
}

.menu-allergen-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
}

.menu-allergen-popover__heading {
  min-width: 0;
}

.menu-allergen-popover__title {
  margin: 0;
  color: #e6c98f;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.25;
}

.menu-allergen-popover__item-name {
  margin: .16rem 0 0;
  color: #fff8eb;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.25;
}

.menu-allergen-popover__close {
  display: grid;
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  padding: 0;
  color: #fff8eb;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.menu-allergen-popover__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .42rem .7rem;
}

.menu-allergen-popover__item {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  align-items: baseline;
  font-size: .78rem;
  line-height: 1.28;
}

.menu-allergen-popover__code {
  color: #e6c98f;
  font-weight: 800;
}

@media (max-width: 340px) {
  .menu-allergen-popover__grid {
    grid-template-columns: 1fr;
  }
}

.menu-allergen-link {
  display: inline-flex;
  margin-top: .65rem;
  color: #e6c98f;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(230, 201, 143, .45);
  text-underline-offset: .2em;
}

body:is(.slug-speisekarte, .slug-breakfast) .bf-img--contain {
  object-fit: contain;
  padding: 5%;
  background: var(--bf-placeholder, #111);
}

body:is(.slug-speisekarte, .slug-breakfast) .menu-compact .bf-img--contain {
  padding: 4.5%;
}

@media (max-width: 767.98px) {
  body:is(.slug-speisekarte, .slug-breakfast) .menu-container:not(.menu-compact) .bf-price {
    font-size: calc(1.035 * clamp(1.14rem, 1.23vw + .63rem, 1.31rem));
  }

  body:is(.slug-speisekarte, .slug-breakfast) .menu-compact .bf-price {
    font-size: calc(.9 * clamp(.95rem, .95vw + .48rem, 1.05rem));
  }

  body:is(.slug-speisekarte, .slug-breakfast) .menu-container:not(.menu-compact) .bf-price.bf-price--variants {
    font-size: calc(.77625 * clamp(1.14rem, 1.23vw + .63rem, 1.31rem));
  }

  body:is(.slug-speisekarte, .slug-breakfast) .menu-compact .bf-price.bf-price--variants {
    font-size: calc(.675 * clamp(.95rem, .95vw + .48rem, 1.05rem));
  }
}

body:is(.slug-speisekarte, .slug-breakfast) .menu-subcategory-divider {
  position: relative;
  border-top-width: 2px;
}

body:is(.slug-speisekarte, .slug-breakfast) .menu-subcategory-divider::after {
  content: "◇";
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0 8px;
  color: #cda45e;
  background: #000;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
  transform: translate(-50%, -52%);
}