@font-face {
  font-family: "Roobert TRIAL";
  src: url("../fonts/RoobertTRIAL-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.menu-page {
  --menu-title: clamp(28px, 2.15vw, 40px);
  --menu-category: clamp(20px, 1.6vw, 30px);
  --menu-text: clamp(22px, 2.05vw, 38px);
  --menu-leading: 1.25;
  --menu-gap: clamp(36px, 4.6vw, 72px);
  background: var(--cream);
  font-synthesis: none;
}

.menu-header {
  padding-top: clamp(48px, 5.1vw, 98px);
}

.menu-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px 48px;
}

.menu-lang {
  display: flex;
  align-items: baseline;
  gap: 1.55em;
  margin: 0;
  padding-top: 0.35em;
  font-family: "Roobert TRIAL", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: var(--menu-category);
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.menu-lang a {
  text-decoration: none;
}

.menu-lang a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.28em;
}

.menu-brand {
  width: min(533px, 42%);
  margin-left: auto;
  padding: 0;
}

.menu-brand .wordmark {
  width: 100%;
}

.menu-title,
.menu-section,
.menu-category,
.menu-close,
.menu-reserve {
  font-family: "Roobert TRIAL", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
}

.menu-title,
.menu-section {
  font-size: var(--menu-title);
}

.menu-category,
.menu-reserve {
  font-size: var(--menu-category);
  letter-spacing: 0.14em;
}

.menu-title {
  margin: clamp(88px, 11vw, 210px) 0 0;
  font-weight: 600;
}

.menu-section,
.menu-category {
  margin: 0;
}

.menu-intro,
.menu-hours,
.menu-legal,
.menu-legal-rest,
.dish-desc,
.dish-price,
.menu-line,
.menu-note {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: var(--menu-text);
  line-height: var(--menu-leading);
}

.menu-intro {
  margin-top: 0.45em;
  margin-bottom: 2.15em;
}

.menu-intro p,
.menu-hours p,
.menu-legal,
.menu-legal-rest p,
.dish-lead,
.dish-desc,
.menu-line,
.menu-note {
  margin: 0;
}

.menu-intro p + p,
.menu-legal-rest p + p {
  margin-top: 1em;
}

.menu-rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #111;
}

.menu-banner,
.menu-columns,
.menu-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--menu-gap);
  align-items: start;
}

.menu-banner {
  align-items: baseline;
  padding: calc(var(--menu-title) * 0.85) 0 calc(var(--menu-title) * 1.7);
}

.menu-banner .menu-section {
  margin: 0;
}

.menu-section {
  margin-top: 0.7em;
  margin-bottom: 0.15em;
}

.menu-banner + .menu-rule + .menu-section {
  margin-top: calc(var(--menu-title) * 0.85);
  margin-bottom: calc(var(--menu-title) * 1.7);
}

.menu-banner + .menu-rule + .menu-section + .menu-columns {
  padding-top: calc(var(--menu-title) * 1.6);
}

.menu-columns {
  margin-top: 0.85em;
}

.menu-rule + .menu-columns {
  margin-top: 0.55em;
}

.menu-col > .menu-section {
  font-size: var(--menu-category);
  letter-spacing: 0.14em;
}

.menu-col > .menu-category,
.menu-col > .menu-section {
  margin-top: 1.15em;
}

.menu-col > .menu-category:not(:first-child) {
  margin-top: calc(var(--menu-text) * 2.15);
}

.menu-col > :first-child {
  margin-top: 0;
}

.menu-col > .menu-category {
  border-top: 1px solid #111;
  padding-top: 0.42em;
}

.dish-name,
.menu-line:not(.is-detail) {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: var(--menu-text);
  line-height: var(--menu-leading);
}

.dish-lead .dish-price,
.menu-line:not(.is-detail) .dish-price {
  font-weight: 400;
}

.menu-banner .menu-line,
.menu-banner .menu-line .dish-price {
  font-weight: 400;
}

.dish-desc,
.menu-note,
.menu-line.is-detail {
  font-size: calc(var(--menu-text) * 0.86);
  line-height: 1.28;
}

.dish-price {
  margin-left: 0.28em;
}

.menu-col > .dish:first-child,
.menu-body > .dish:first-child {
  margin-top: 0;
}

.dish + .dish,
.menu-line + .dish,
.dish + .menu-line,
.menu-line + .menu-line,
.menu-note {
  margin-top: calc(var(--menu-text) * 0.08);
}

.menu-layout-stacked .dish + .dish {
  margin-top: calc(var(--menu-text) * 0.55);
}

.menu-col > .menu-section + .dish,
.menu-col > .menu-heading + .dish {
  margin-top: calc(var(--menu-text) * 0.28);
}

.menu-col > .menu-category + .dish,
.menu-col > .menu-category + .menu-line,
.menu-col > .menu-category + .dish-group {
  margin-top: calc(var(--menu-text) * 1.37);
}

.dish-group + .dish-group {
  margin-top: calc(var(--menu-text) * 0.95);
}

.menu-rule-foot {
  margin-top: 2.8em;
}

.menu-foot {
  row-gap: 1.15em;
  padding: 1.35em 0 1.55em;
}

.menu-fruehstueckskarte .menu-foot {
  padding-top: calc(var(--menu-title) * 1.5);
  padding-bottom: calc(var(--menu-title) * 1.7);
  grid-template-areas:
    "hours legal"
    "reserve legalrest";
}

.menu-hours {
  grid-area: hours;
}

.menu-legal {
  grid-area: legal;
}

.menu-reserve {
  grid-area: reserve;
  align-self: start;
  justify-self: start;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.28em;
}

.menu-legal-rest {
  grid-area: legalrest;
}

.menu-photo {
  width: min(560px, 42%);
  margin: clamp(56px, 6vw, 96px) auto 0;
}

.menu-photo img {
  width: 100%;
  height: auto;
}

.menu-close {
  margin: 0.85em 0 clamp(72px, 8vw, 140px);
  font-size: clamp(42px, 4.4vw, 78px);
  letter-spacing: 0.14em;
  line-height: 1.12;
  text-align: center;
}

.menu-close span {
  display: block;
}

@media (max-width: 800px) {
  .menu-top {
    flex-direction: column;
  }

  .menu-brand {
    width: min(280px, 78%);
    margin-left: 0;
  }

  .menu-title,
  .menu-section,
  .menu-category,
  .menu-reserve,
  .menu-close {
    letter-spacing: 0.08em;
  }

  .menu-title {
    margin-top: 64px;
  }

  .menu-banner,
  .menu-columns,
  .menu-foot {
    grid-template-columns: 1fr;
    row-gap: 1.4em;
  }

  .menu-foot {
    grid-template-areas:
      "hours"
      "legal"
      "legalrest"
      "reserve";
  }

  .menu-banner .menu-line {
    margin-top: 0.35em;
  }

  .menu-photo {
    width: min(420px, 78%);
  }

  .menu-close {
    font-size: clamp(36px, 10vw, 56px);
  }
}