/* Café Hilda · generous paper, cobalt ink, botanical accents. */
#karte {
  --menu-ink: #233b73;
  --menu-muted: #666773;
  --menu-paper: #fffdf6;
  --menu-rule: #deded3;
  padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(4rem, 7vw, 7rem);
  background: #e7e9d7;
  isolation: isolate;
}
#karte::before {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1200' preserveAspectRatio='none'%3E%3Cpath fill='%23f3ecdf' d='M0 0h1600v240C1080 520 640 0 0 370Z'/%3E%3Cpath fill='%23d3dcca' d='M0 860c500-300 1000 330 1600-35v375H0Z'/%3E%3Cpath fill='%23ded4df' d='M0 1110c550-240 1050 190 1600-105v195H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}
#karte .container { width: min(1180px, 92vw); }
#karte .section-head { max-width: 760px; margin: 0 auto 2.8rem; }
#karte .eyebrow { color: var(--menu-ink); font-size: .72rem; letter-spacing: .22em; }
#karte h2 { color: var(--menu-ink); font-size: clamp(2.3rem, 4.5vw, 4rem); letter-spacing: -.04em; }
#karte h2 em { font-weight: 400; color: #6a7950; }
#karte .menu-intro { color: var(--menu-muted); max-width: 510px; margin: 1.3rem auto 0; font-size: 1rem; line-height: 1.65; }
#karte .menu-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin: 0 auto 1rem;
  max-width: 1060px;
}
#karte .menu-tab {
  min-height: 65px;
  padding: .9rem 1.15rem;
  border: 1px solid rgba(35, 59, 115, .18);
  border-radius: 12px 12px 4px 4px;
  background: rgba(255, 253, 246, .5);
  box-shadow: none;
  color: var(--menu-ink);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  transition: background .2s, color .2s, border-color .2s;
}
#karte .menu-tab-number { font-family: var(--serif); font-size: .82rem; font-style: italic; opacity: .64; }
#karte .menu-tab:hover { transform: none; background: var(--menu-paper); border-color: var(--menu-ink); }
#karte .menu-tab.active { color: var(--menu-paper); background: var(--menu-ink); border-color: var(--menu-ink); box-shadow: none; }
#karte .menu-tab:focus-visible { outline: 3px solid var(--menu-ink); outline-offset: 3px; }
#karte .menu-card {
  max-width: 1060px;
  padding: clamp(1.4rem, 4vw, 3.4rem);
  border: 0;
  border-top: 5px solid var(--menu-ink);
  border-radius: 5px 5px 30px 5px;
  background: var(--menu-paper);
  box-shadow: 0 20px 48px -28px rgba(40, 49, 51, .23);
  transition: border-color .25s;
}
#karte .menu-card::before { display: none; }
#karte .menu-card[data-category="matcha"] { border-top-color: #7a8a53; }
#karte .menu-card[data-category="iced"] { border-top-color: #a27893; }
#karte .menu-card[data-category="food"] { border-top-color: #ad744d; }
#karte .menu-panel { animation: none; }
#karte .menu-panel:focus-visible { outline: 2px solid var(--menu-ink); outline-offset: 8px; }
#karte .menu-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; padding-bottom: 2rem; margin-bottom: .6rem; border-bottom: 1px solid var(--menu-ink); }
#karte .menu-panel-head h3 { color: var(--menu-ink); font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.14; }
#karte .menu-panel-head > p { max-width: 280px; color: var(--menu-muted); font-size: .9rem; line-height: 1.65; }
#karte .menu-list,
#karte .menu-list.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-count: auto; column-gap: 2.6rem; row-gap: 0; }
#karte .menu-list li { padding: 1rem 0; border: 0; border-bottom: 1px solid var(--menu-rule); border-radius: 0; transition: none; }
#karte .menu-list li:hover { background: transparent; transform: none; }
#karte .mi-row { gap: 1rem; justify-content: space-between; align-items: baseline; }
#karte .mi-name { min-width: 0; color: #303f56; font-size: .93rem; font-weight: 700; line-height: 1.45; }
#karte .mi-name em { display: block; font-size: .8rem; color: var(--menu-muted); font-weight: 400; }
#karte .mi-dots { display: none; }
#karte .mi-price { color: var(--menu-ink); font-size: .91rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#karte .menu-list li:hover .mi-price { color: var(--menu-ink); }
#karte .mi-desc { font-size: .82rem; color: var(--menu-muted); line-height: 1.65; margin-top: .4rem; max-width: 50ch; }
#karte .mi-add { color: var(--menu-muted); font-size: .75rem; line-height: 1.6; font-weight: 400; }
#karte .mi-fav { color: #946079; }
#karte .mi-labels { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .43rem; }
#karte .menu-badge { display: inline-flex; align-items: center; gap: .3rem; width: fit-content; padding: .22rem .55rem; border-radius: 999px; background: #e7edd7; color: #3d5b32; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
#karte .menu-badge-option { background: #f0f0e7; color: #5b6348; }
#karte .menu-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#karte .menu-note { color: var(--menu-muted); font-size: .78rem; line-height: 1.8; text-align: left; border: 0; border-radius: 0; padding: 1rem 0 0; background: transparent; margin-top: .6rem; }
#karte .menu-plant-note { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.6rem auto 0; max-width: 1060px; color: #415734; padding: 1rem; }
#karte .menu-plant-note > svg { flex: 0 0 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
#karte .menu-plant-note strong { display: block; font-size: .9rem; font-weight: 700; }
#karte .menu-plant-note span { display: block; font-size: .78rem; line-height: 1.6; margin-top: .15rem; }
#karte .menu-foot { max-width: 660px; margin: 1.4rem auto 0; font-size: .79rem; color: #535867; }
#karte .menu-foot a { color: var(--menu-ink); border-bottom-color: var(--menu-ink); }
#karte .menu-panel.swap li { animation: menuItemIn .25s ease-out both; animation-delay: calc(min(var(--i, 0), 5) * 22ms); }
@keyframes menuItemIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  #karte .menu-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .7rem; }
  #karte .menu-tab { min-height: 54px; border-radius: 8px; font-size: .82rem; padding: .7rem .6rem; gap: .5rem; }
  #karte .menu-panel-head { display: block; padding-bottom: 1.5rem; }
  #karte .menu-panel-head h3 { font-size: 2rem; }
  #karte .menu-panel-head > p { max-width: 390px; margin-top: 1rem; font-size: .88rem; }
  #karte .menu-list,
  #karte .menu-list.cols-2 { grid-template-columns: 1fr; }
  #karte .mi-name { font-size: .94rem; }
  #karte .mi-price { font-size: .9rem; }
  #karte .mi-desc { font-size: .85rem; }
  #karte .menu-plant-note { padding: .8rem .3rem; align-items: flex-start; gap: .7rem; }
  #karte .menu-plant-note > svg { margin-top: .1rem; }
  #karte .menu-plant-note span { font-size: .77rem; }
}
@media (prefers-reduced-motion: reduce) {
  #karte .menu-panel.swap li { animation: none; }
  #karte .menu-tab, #karte .menu-card { transition: none; }
}

/* Distinct menus per café; native details keep every category accessible. */
#karte [hidden]{display:none!important}
#karte .menu-locations{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:1060px;margin:0 auto 1.5rem}
#karte .menu-locations button{min-height:88px;border:1px solid var(--menu-ink);border-radius:12px;background:var(--menu-paper);color:var(--menu-ink);font:600 clamp(1.25rem,3vw,1.8rem) var(--serif);padding:1rem;cursor:pointer;transition:background .18s,color .18s}
#karte .menu-locations button span{display:block;font:600 .72rem var(--sans);margin-top:.4rem}
#karte .menu-locations button[aria-pressed="true"]{background:var(--menu-ink);color:var(--menu-paper)}
#karte .menu-locations button:focus-visible,#karte summary:focus-visible{outline:3px solid var(--menu-ink);outline-offset:4px}
#karte .city-menu{max-width:1060px;margin:0 auto 1.5rem;background:var(--menu-paper);padding:clamp(1.2rem,4vw,3rem);border-radius:6px 6px 30px 6px;border-top:5px solid var(--menu-ink)}
#karte .city-menu-head{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:1.5rem}
#karte .city-menu-head h3{font:400 clamp(1.7rem,3vw,2.5rem) var(--serif);color:var(--menu-ink);margin-top:.6rem}
#karte .menu-pdf{color:var(--menu-ink);font-size:.82rem;font-weight:700;text-decoration:underline;text-underline-offset:5px;padding:12px 0}
#karte .menu-category{border-bottom:1px solid var(--menu-rule)}
#karte .menu-category summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.35rem 0;cursor:pointer;list-style:none;color:var(--menu-ink);font:600 clamp(1.1rem,2.4vw,1.5rem) var(--serif)}
#karte .menu-category summary::-webkit-details-marker{display:none}
#karte .category-plus{font:400 1.5rem var(--sans)}
#karte details[open] .category-plus{transform:rotate(45deg)}
#karte .category-content{padding-bottom:1.4rem}
#karte .menu-list li{break-inside:avoid;min-width:0}
#karte .mi-price{white-space:nowrap;flex-shrink:0}
#karte .menu-plant-note{justify-content:flex-start;padding:0;margin:1.5rem 0 0}
@media(max-width:600px){#karte .city-menu-head{display:block}#karte .menu-pdf{display:inline-block;margin-top:.4rem}#karte .menu-locations{gap:.6rem}#karte .menu-locations button span{font-size:.65rem}#karte .mi-row{gap:.5rem}}