:root {
  color-scheme:dark;
  --bg:#10110e;
  --surface:#1a1c17;
  --line:#30342a;
  --green:#8be000;
  --muted:#a8afa0;
  --text:#f6f7f2;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 Arial,Helvetica,sans-serif;
}
.draft {
  padding:9px 20px;
  text-align:center;
  background:#252d1b;
  color:#d5edb0;
  font-size:12px;
  letter-spacing:.1em;
}
.draft span {
  letter-spacing:0;
  margin-left:14px;
  color:#c2cbb8;
}
header {
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  padding:32px 36px;
  border-bottom:1px solid var(--line);
}

.logo img {
  position:center;
  width:100%;
  max-width:none;
  height:auto;
}
.header-label {
  font-size:12px;
  letter-spacing:.2em;
  color:var(--muted);
}
main {
  max-width:1100px;
  margin:auto;
  padding:0 36px;
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  padding:50px 0 34px;
}
.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--green);
  margin:0 0 12px;
}
h1 {
  font-size:clamp(42px,7vw,76px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:0;
  font-weight:800;
}
h1 span {
  color:var(--green);
}
.intro-note {
  color:var(--muted);
  font-size:16px;
  margin:0 0 6px;
  line-height:1.65;
}
.intro-note strong {
  color:var(--text);
  font-weight:400;
}
nav {
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:5;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.tabs {
  display:flex;
  gap:9px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding-bottom:3px;
}
.tabs button {
  border:1px solid #383c31;
  color:#d1d5ca;
  background:transparent;
  font:700 15px/1.3 Arial,sans-serif;
  white-space:nowrap;
  padding:13px 23px;
  border-radius:50px;
  cursor:pointer;
}
.tabs button[aria-selected=true] {
  background:var(--green);
  color:#172007;
  border-color:var(--green);
}
.tabs button:hover {
  border-color:var(--green);
}
:focus-visible {
  outline:2px solid var(--green);
  outline-offset:4px;
}
.menu {
  padding:34px 0 20px;
  outline:none;
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:24px;
}
.section-heading .eyebrow {
  color:var(--muted);
  margin-bottom:4px;
}
h2 {
  font-size:34px;
  letter-spacing:-.03em;
  margin:0;
}
.count {
  color:var(--muted);
  font-size:14px;
  padding-bottom:6px;
}
.items {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.item {
  padding:25px;
  background:var(--surface);
  border:1px solid #2b2f24;
  border-radius:4px;
  min-width:0;
}
.item-top {
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:baseline;
}
.item h3 {
  font-size:20px;
  letter-spacing:-.025em;
  line-height:1.3;
  margin:0;
}
.price {
  font-size:19px;
  font-weight:700;
  white-space:nowrap;
  color:var(--green);
}
.item p {
  color:#b0b6a8;
  margin:12px 0 18px;
  font-size:15px;
  line-height:1.6;
  max-width:340px;
}
.item-meta {
  display:flex;
  justify-content:space-between;
  color:#939c88;
  font-size:12px;
  gap:12px;
}
.notice {
  display:flex;
  gap:15px;
  padding:24px 0;
  margin:14px 0 8px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--muted);
}
.notice-icon {
  flex:none;
  width:23px;
  height:23px;
  border:1px solid #77816c;
  border-radius:50%;
  text-align:center;
  font-family:Georgia,serif;
}
.notice h3 {
  font-size:14px;
  color:#d4d9cd;
  margin:0 0 5px;
}
.notice p {
  font-size:14px;
  line-height:1.6;
  margin:0;
  max-width:710px;
}
footer {
  padding:35px 0 40px;
  text-align:center;
}
footer>span {
  font:700 25px Georgia,serif;
  letter-spacing:.03em;
}
.footer-dot {
  color:var(--green);
}
footer p {
  font-size:12px;
  color:var(--muted);
  margin:4px 0 18px;
}
footer small {
  font-size:12px;
  color:#929b86;
}
@media(min-width:800px) {
  h1 br {
    display:none;
  }
  .intro {
    padding-top:58px;
    padding-bottom:48px;
  }
  .intro-note {
    margin-left:30px;
  }
  .intro-note br {
    display:none;
  }
  .intro-note {
    max-width:180px;
  }
}
@media(max-width:600px) {
  header {
    padding:23px 22px;
  }

  .header-label {
    display:none;
  }
  main {
    padding:0 22px;
  }
  .draft {
    font-size:11px;
    padding:9px 10px;
    letter-spacing:.08em;
  }
  .draft span {
    margin-left:7px;
    font-size:11px;
  }
  .intro {
    padding:30px 0 22px;
    gap:14px;
  }
  .intro .eyebrow {
    font-size:10px;
    letter-spacing:.12em;
  }
  h1 {
    font-size:45px;
  }
  .intro-note {
    font-size:13px;
    line-height:1.7;
  }
  .tabs button {
    font-size:14px;
    padding:12px 20px;
  }
  .tabs {
    gap:7px;
  }
  nav {
    margin-right:-22px;
    padding-right:22px;
  }
  .menu {
    padding-top:26px;
  }
  .section-heading {
    margin-bottom:18px;
  }
  h2 {
    font-size:28px;
  }
  .items {
    grid-template-columns:1fr;
    gap:10px;
  }
  .item {
    padding:21px;
  }
  .item h3 {
    font-size:19px;
  }
  .item p {
    margin:9px 0 16px;
  }
  .price {
    font-size:18px;
  }
  .notice {
    padding:22px 0;
  }
  .count {
    font-size:13px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}

/* Ergänzungen für die vollständige Speisekarte */
:root {
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: Arial, Helvetica, sans-serif;
  --font-size: 16px;
}
body { font-family: var(--font-body); font-size: var(--font-size); }
h1, h2, h3 { font-family: var(--font-heading); }
.tabs button { font-family: var(--font-body); }
[hidden] { display: none !important; }
.draft { letter-spacing: 0; font-size: 13px; line-height: 1.5; }
.category-select-label { display: block; margin: 0 0 8px; font-size: 14px; color: var(--muted); }
#category-select { width: 100%; padding: 13px; margin-bottom: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.tabs { overflow-y: hidden; }
.tabs button { min-height: 44px; }
.category-note { margin: -8px 0 24px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.section-heading { gap: 16px; align-items: baseline; }
.section-heading h2 { overflow-wrap: anywhere; }
.count { flex-shrink: 0; }
.item { display: flex; flex-direction: column; }
.item p { font-size: 16px; }
.item-top { flex-wrap: wrap; gap: 8px 16px; }
.item-top h3 { flex: 1; min-width: 170px; }
.dish-number { color: var(--muted); font-weight: normal; font-size: 14px; }
.variant-prices { display: flex; margin: auto 0 0; padding-top: 14px; gap: 25px; }
.variant { min-width: 82px; }
.variant dt { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.variant dd { margin: 0; }
.codes { display: block; margin-top: 18px; font-size: 12px; color: #b2baa7; text-underline-offset: 3px; }
.legend-details { margin-top: 16px; font-size: 14px; }
.legend-details summary { cursor: pointer; color: var(--text); padding: 8px 0; }
.legend-details h4 { margin-bottom: 10px; font-size: 15px; }
.legend-details dl { display: grid; grid-template-columns: 28px 1fr; gap: 9px 12px; margin: 0 0 25px; }
.legend-details dt { color: var(--green); font-weight: bold; }
.legend-details dd { margin: 0; line-height: 1.6; }
#allergene { scroll-margin-top: 160px; }
.contact { margin-top: 25px; }
.phone-link { display: inline-block; padding: 13px 18px; border: 1px solid var(--green); border-radius: 7px; color: var(--green); font-weight: bold; font-size: 16px; text-decoration: none; margin-bottom: 15px; }
.contact p { font-size: 14px; margin: 5px 0; }
.contact address { font-style: normal; font-size: 14px; color: var(--muted); margin-top: 18px; }
.category-select-label, #category-select { display: none; }
@media (max-width: 600px) {
  nav {
    position: sticky;
    top: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* Eine Reihe: mit dem Finger nach links oder rechts wischen. */
  .tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tabs button {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: 50px;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .section-heading h2 { font-size: 26px; }
  .count { font-size: 12px; }
  .draft { font-size: 12px; }
  h1 { font-size: 42px; }
  .intro-note { font-size: 12px; }
}