/* Karte: a typeset café menu on warm paper. */

/* No intro block since Armin's notes of 20 October 2026: the category bar sits directly below the fixed header. */
.page-karte main { padding-top: var(--header); }

/* Sticky category bar directly below the fixed header. */
.menu-nav { position: sticky; top: var(--header); z-index: 30; background: rgba(14, 12, 10, .9); border-block: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.menu-nav-track { display: flex; gap: clamp(1.4rem, 3vw, 2.8rem); width: min(1440px, 100% - 2 * var(--gutter)); margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.menu-nav-track::-webkit-scrollbar { display: none; }
.menu-nav a { position: relative; flex: none; padding: 1.05rem 0; color: var(--on-dark-2); font: 550 .95rem/1 var(--sans); font-stretch: 108%; transition: color .25s ease; }
.menu-nav a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--spritz); transform: scaleX(0); transition: transform .35s var(--ease); }
.menu-nav a:hover, .menu-nav a[aria-current] { color: var(--cream); }
.menu-nav a[aria-current]::after { transform: scaleX(1); }

.menu-paper { position: relative; padding-bottom: var(--section); background: var(--paper); }
.menu-paper::before { position: absolute; inset: 0; content: ""; background: url("assets/grain.svg") 0 0 / 280px 280px; opacity: .45; mix-blend-mode: multiply; pointer-events: none; }
.menu-section { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 2rem clamp(2.5rem, 6vw, 6.5rem); padding: clamp(4.5rem, 9vw, 8rem) 0; border-bottom: 1px solid var(--line-light); scroll-margin-top: calc(var(--header) + 3.5rem); }
.menu-head { align-self: start; }
.menu-head .display-l { font-size: clamp(2.2rem, 3.8vw, 4rem); }
.menu-note { max-width: 22rem; margin-top: 1.2rem; color: var(--ink-2); font-style: italic; line-height: 1.55; }
.menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); align-content: start; }
.menu-list--single { grid-template-columns: minmax(0, 1fr); }
.menu-list li { padding: 1.05rem 0 1.15rem; border-top: 1px solid var(--line-light); }
.menu-list h3, .menu-list h4 { font: 400 1.32rem/1.25 var(--serif); }
.menu-list .price { font-size: 1.2rem; }
.menu-list p { margin-top: .25rem; color: var(--ink-2); font-size: .98rem; font-style: italic; line-height: 1.45; }

/* Sub-blocks of a category (Specials, Extras, Croissants, Aperitivo Zero, Weiß- und Rotwein): a small-caps title over the same leader rows. */
.menu-groups { display: grid; gap: clamp(2.4rem, 4vw, 3.4rem); align-content: start; }
.menu-group-title { margin-bottom: .5rem; }

/* Features: a render beside the list, alternating sides. */
.menu-section--feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.menu-section--flip .menu-feature { order: 2; }
.menu-feature { position: sticky; top: calc(var(--header) + 5rem); overflow: hidden; background: var(--night-3); }
.menu-feature img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.menu-feature--wide img { aspect-ratio: 4 / 3; }  /* the toastie is a landscape photo; 4:5 would cut both ends of the sandwich */
.menu-section--feature .menu-head { margin-bottom: 2.2rem; }

.menu-interlude { position: relative; height: clamp(360px, 62vh, 680px); overflow: hidden; background: var(--night); }
.menu-interlude img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
@supports (animation-timeline: view()) {
  .menu-interlude img { animation: interlude linear both; animation-timeline: view(); }
  @keyframes interlude { from { transform: translateY(-8%) scale(1.18); } to { transform: translateY(8%) scale(1.18); } }
}

.menu-footnotes { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 1rem clamp(2.5rem, 6vw, 6.5rem); padding-top: 3rem; color: var(--ink-2); }
.menu-footnotes p:first-child { grid-column: 2; }
.menu-footnotes p:last-child { grid-column: 2; }

@media (max-width: 1080px) {
  .menu-section, .menu-footnotes { grid-template-columns: minmax(0, 1fr); }
  .menu-footnotes p:first-child, .menu-footnotes p:last-child { grid-column: auto; }
  .menu-section--feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

@media (max-width: 860px) {
  .menu-list { grid-template-columns: minmax(0, 1fr); }
  .menu-section--feature { grid-template-columns: minmax(0, 1fr); }
  .menu-section--flip .menu-feature { order: 0; }
  .menu-feature { position: relative; top: 0; max-width: 460px; }
}