:root {
  --yellow: #fbff00; /* etwas helleres, warmes Gelb */
  --green: #0F3E2A;
  --ink: #111;
  --muted: #666;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:#fafafa;


}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem .9rem;
  background: transparent; /* Verlauf entfernt */
  color: #fff;

}
.topbar .brand{
  display:flex;
  align-items:center;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.topbar .brand img{
  width:44px;
  height:44px;
  margin-right:.5rem;
  object-fit:contain;
}
.topbar .navlinks a{
  color:#fff;
  text-decoration:none;
  margin-left:1rem;
  font-weight:600;
  opacity:.95;
  
}
  .topbar span {
  margin-left: 0;
  padding-left: 0;
  position: absolute;
  left: 70px; /* Abstand vom linken Rand (kannst du anpassen z. B. 0 oder 15px) */
  top: 12px;  /* leicht nach unten, damit es schön sitzt */
  }
  .topbar span {
  visibility: hidden; /* unsichtbar, aber behält Platz */
}



.menu-toggle {
  display: none;
}

.hero{
  /* immer volle Bildschirmhöhe – auch auf iOS */
  min-height: 100svh;     /* neues, stabiles Viewport-Maß */
  height: 100dvh;         /* dynamische Höhe, wenn unterstützt */
  /* iOS-Fallback */
  background: #0F3E2A url('hero.png') center/cover no-repeat;
  display: grid;
  place-items: center;
  position: relative;
  color: #fff;
  text-align: center;
  padding-bottom: env(safe-area-inset-bottom); /* Notch-/Homebar-Rand */
  overflow: hidden;
}

/* zusätzlicher iOS-Fix für ältere WebKit-Versionen */
@supports (-webkit-touch-callout: none) {
  .hero{ min-height: -webkit-fill-available; }
}

/* auf kleinen Screens weniger Top-Padding, damit nichts „schiebt“ */
@media (max-width: 600px) {
  .herotext{
    padding: calc(4.5rem + 70px) 1rem 2rem;
  }
}



.hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15) 35%, rgba(0,0,0,.35));
  pointer-events: none;


}
.herotext {
  padding: calc(7rem + 120px) 1rem 3rem; /* Wert anpassen */
}
.headline{
  font-size:clamp(2rem,7vw,4rem);
  margin:0 0 .25rem;
  font-weight:900;
  letter-spacing:.02em;
}
.tagline{opacity:.95;margin:.15rem 0 .3rem;font-weight:700}
.addr{opacity:.9;margin:.2rem 0 1.15rem}
.btn{
  display:inline-block;
  border:2px solid #fff;
  padding:.78rem 1.05rem;
  border-radius:.75rem;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  margin:.25rem .35rem;


}


.btn.primary {
  background: #E5B700;   /* sattes, warmes Gelb – wie im Logo */
  border-color: #E5B700;
  color: #111;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease-in-out;
}

.btn.primary:hover {
  filter: brightness(1.1); /* beim Hover leicht heller */
}
@keyframes pulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.12); }  /* etwas dunkleres, dezentes Aufleuchten */
  100% { filter: brightness(1); }
}

.btn.primary {
  background: #E5B700;   /* sattes Goldgelb wie im Logo */
  border-color: #E5B700;
  color: #111;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  animation: pulse 2.5s infinite ease-in-out; /* weicherer Rhythmus */
  transition: all 0.25s ease-in-out;
}


.section{padding:3.2rem 1rem;background:#fff}
.section.alt{background:#f5f5f5}
.container{max-width:980px;margin:0 auto}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem);margin:0 0 1rem}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.item{
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:.8rem;
  align-items:center;
  background:#fff;
  border-radius:1rem;
  padding:1rem;
  border:1px solid #eee;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
}
.item img{
  width:80px;
  height:80px;
  border-radius:.8rem;
  object-fit:cover;
}
.item h4{margin:0 0 .15rem}
.item p{margin:0;color:var(--muted)}
.item .price{font-weight:900;color:#111}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:1.4rem;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:1rem}}
.hours{list-style:none;padding:0;margin:0;border:1px solid #eee;border-radius:1rem;overflow:hidden;background:#fff}
.hours li{display:flex;justify-content:space-between;padding:.8rem .9rem;border-bottom:1px solid #f1f1f1}
.hours li:last-child{border-bottom:none}
.hours li.closed span:last-child{color:crimson;font-weight:700}
.card{background:#fff;border:1px solid #eee;border-radius:1rem;padding:1rem;box-shadow:0 6px 24px rgba(0,0,0,.04)}
.contact{list-style:none;padding:0;margin:0}
.contact li{padding:.35rem 0}
.btnrow{margin-top:.6rem}
.mapwrap{position:relative;overflow:hidden;border-radius:1rem;border:1px solid #eee;box-shadow:0 6px 24px rgba(0,0,0,.04)}
.mapwrap iframe{width:100%;height:360px;border:0;display:block}
.footer{background:#0b0b0b;color:#ddd;padding:2rem 1rem}
.footgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem;align-items:center}
@media(max-width:900px){.footgrid{grid-template-columns:1fr;text-align:center}}
.id{display:flex;align-items:center;gap:.65rem;justify-content:flex-start}
.id img{width:44px;height:44px;object-fit:contain}
.links a{color:#fff;text-decoration:none;margin-right:.75rem}
.links a:hover{text-decoration:underline}
.copy{opacity:.8;text-align:right}
@media(max-width:900px){.copy{text-align:center}}


.headline {
  font-size: clamp(2rem, 7vw, 4rem);
  margin: 0 0 .25rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: #ffffff; /* klares Weiß */
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); /* für bessere Lesbarkeit auf hellen Flächen */
  /* Gold-Schrift mit animiertem Glanz */
}
.headline {
  font-size: clamp(2rem, 7vw, 4rem);
  margin: 0 0 .25rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: #ffffff; /* reines Weiß */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* leichte Tiefe */

}
/* Standard: im Hero-Bereich weiß */
.topbar .navlinks a,
.topbar .brand span {
  color: #fff;
  transition: color 0.3s ease;
}

/* Wenn die Seite gescrollt wurde (Topbar über Weißbereich) */
body.scrolled .topbar .navlinks a,
body.scrolled .topbar .brand span {
  color: #111; /* schwarz über weißem Hintergrund */
}

/* Tabs-Leiste */
.menu-tabs{
  position: sticky; top: 64px; z-index: 40;
  display:flex; gap:.6rem; overflow-x:auto;
  padding:.6rem; margin:0 0 1rem;
  background: rgba(10,10,10,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius:.75rem; scrollbar-width:none;
}
.menu-tabs::-webkit-scrollbar{ display:none; }
.menu-tabs a{
  white-space:nowrap; padding:.5rem .75rem; border-radius:.65rem;
  background: rgba(255,255,255,.1); color:#fff; text-decoration:none;
  font-weight:700; border:1px solid rgba(255,255,255,.18);
}
.menu-tabs a.active{ background: var(--yellow); color:#111; border-color:var(--yellow); }

/* Liste mit Thumbs */
.menusection{ margin:2rem 0; }
.menusection h3{ margin:0 0 .6rem; font-size:clamp(1.25rem,2.6vw,1.6rem); }
.menulist{ list-style:none; padding:0; margin:0; }
.menulist li{
  display:grid; grid-template-columns:64px 1fr auto;
  gap:.6rem .9rem; align-items:center;
  background:#fff; border-radius:.8rem; padding:.75rem .9rem;
  border:1px solid #eee; box-shadow:0 6px 24px rgba(0,0,0,.04);
  margin-bottom:.5rem;
}
.menulist .thumb{ width:64px; height:64px; object-fit:cover; border-radius:.6rem; display:block; }
.menulist .meta{ display:flex; flex-direction:column; gap:.15rem; }
.menulist .meta > span{ font-weight:800; }
.menulist .meta > em{ font-style:normal; opacity:.7; }
.menulist strong{ font-weight:900; white-space:nowrap; margin-left:.5rem; }

@media (max-width:480px){
  .menulist li{ grid-template-columns:56px 1fr auto; }
  .menulist .thumb{ width:56px; height:56px; }
}

/* 1) sanftes Scrollen für Ankerlinks */
html { scroll-behavior: smooth; }

/* 2) Höhe deiner Topbar (anpassen, z. B. 64px) */
:root { --topbar-h: 64px; }

/* 3) Tabs-Leiste (falls noch nicht drin) */
.menu-tabs{
  position: sticky; top: var(--topbar-h);
  z-index: 40; display:flex; gap:.6rem; overflow-x:auto;
  padding:.6rem; margin:0 0 1rem;
  background: rgba(10,10,10,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius:.75rem; scrollbar-width:none;
}
.menu-tabs::-webkit-scrollbar{ display:none; }
.menu-tabs a{
  white-space:nowrap; padding:.5rem .75rem; border-radius:.65rem;
  background: rgba(255,255,255,.1); color:#fff; text-decoration:none;
  font-weight:700; border:1px solid rgba(255,255,255,.18);
}
.menu-tabs a.active{ background: var(--yellow); color:#111; border-color: var(--yellow); }

/* 4) Ankerziel darf nicht unter die fixierte Topbar rutschen */
.menusection{ scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* 5) CSS-only „active Tab“ mit :target + :has()
      -> markiert den Link, dessen Abschnitt im URL-Hash steht */
.container:has(#cat-kebap:target)           .menu-tabs a[href="#cat-kebap"]{    background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-duerum:target)          .menu-tabs a[href="#cat-duerum"]{   background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-kebapteller:target)     .menu-tabs a[href="#cat-kebapteller"]{background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-vegetarisch:target)     .menu-tabs a[href="#cat-vegetarisch"]{background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-box:target)             .menu-tabs a[href="#cat-box"]{      background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-lahmacun:target)        .menu-tabs a[href="#cat-lahmacun"]{ background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-spezial:target)         .menu-tabs a[href="#cat-spezial"]{  background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-salat:target)           .menu-tabs a[href="#cat-salat"]{    background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-teig:target)            .menu-tabs a[href="#cat-teig"]{     background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-auflauf:target)         .menu-tabs a[href="#cat-auflauf"]{  background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-pasta:target)           .menu-tabs a[href="#cat-pasta"]{    background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-pizza:target)           .menu-tabs a[href="#cat-pizza"]{    background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-baguette:target)        .menu-tabs a[href="#cat-baguette"]{ background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-pizzabroetchen:target)  .menu-tabs a[href="#cat-pizzabroetchen"]{background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-rollo:target)           .menu-tabs a[href="#cat-rollo"]{    background:var(--yellow); color:#111; border-color:var(--yellow); }
.container:has(#cat-drinks:target)          .menu-tabs a[href="#cat-drinks"]{   background:var(--yellow); color:#111; border-color:var(--yellow); }

/* 6) Optional: Ersten Tab markieren, wenn noch kein Hash in der URL ist */



.menulist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  background: #fff;
  border-radius: .8rem;
  padding: .75rem .9rem;
  border: 1px solid #eee;
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
  margin-bottom: .5rem;
}

/* Bild + Text nebeneinander */
.menulist .thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: .6rem;
}

/* Textteil */
.menulist .meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.menulist .meta > span {
  font-weight: 800;
}

.menulist .meta > em {
  font-style: normal;
  opacity: .7;
}

/* Preis immer rechts außen */
.menulist strong {
  font-weight: 900;
  white-space: nowrap;
  margin-left: 1rem;
  text-align: right;
  flex-shrink: 0;
}

.container:has(#cat-auflauf:target)        .menu-tabs a[href="#cat-auflauf"]{background:var(--yellow);color:#111;border-color:var(--yellow);}
.container:has(#cat-pasta:target)          .menu-tabs a[href="#cat-pasta"]{background:var(--yellow);color:#111;border-color:var(--yellow);}
.container:has(#cat-pizza:target)          .menu-tabs a[href="#cat-pizza"]{background:var(--yellow);color:#111;border-color:var(--yellow);}
.container:has(#cat-baguette:target)       .menu-tabs a[href="#cat-baguette"]{background:var(--yellow);color:#111;border-color:var(--yellow);}
.container:has(#cat-pizzabroetchen:target) .menu-tabs a[href="#cat-pizzabroetchen"]{background:var(--yellow);color:#111;border-color:var(--yellow);}
.container:has(#cat-rollo:target)          .menu-tabs a[href="#cat-rollo"]{background:var(--yellow);color:#111;border-color:var(--yellow);}
.container:has(#cat-drinks:target)         .menu-tabs a[href="#cat-drinks"]{background:var(--yellow);color:#111;border-color:var(--yellow);}


.menu-tabs {
  display: flex;
  flex-wrap: wrap;          /* bricht in mehrere Zeilen um */
  justify-content: center;  /* zentriert die Tabs */
  gap: .5rem;               /* etwas Abstand zwischen den Tabs */
  background: #fff;         /* Hintergrundfarbe */
  padding: .6rem .5rem;
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
}

.menu-tabs a {
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: .6rem;
  background: #f7f7f7;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  transition: all .2s ease;
}

.menu-tabs a:hover,
.menu-tabs a:focus,
body:has(#menu:has(:target)) .menu-tabs a[href*="#cat-"]:target {
  background: var(--yellow);
  color: #111;
}

/* === SPEISEKARTEN-TABS (bereinigt) ============================== */

/* Abstand, Sticky, 2-zeiliges Layout */
.menu-tabs{
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;       /* ggf. 2 Zeilen */
  justify-content: center;
  gap: .5rem;
  padding: .6rem .5rem;
  background: #fff;
  border-radius: .75rem;
}

/* Tab-Button */
.menu-tabs a{
  display: inline-block;
  padding: .55rem .85rem;
  border-radius: .6rem;
  background: #f7f7f7;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  border: 1px solid #eee;
  transition: filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover/Focus (nur optischer Effekt) */
.menu-tabs a:hover,
.menu-tabs a:focus{
  filter: brightness(0.98);
}

/* Der aktive Tab: wird GELB, sobald der entsprechende Abschnitt im Hash steht */
.container:has(#cat-kebap:target)           .menu-tabs a[href="#cat-kebap"],
.container:has(#cat-duerum:target)          .menu-tabs a[href="#cat-duerum"],
.container:has(#cat-kebapteller:target)     .menu-tabs a[href="#cat-kebapteller"],
.container:has(#cat-vegetarisch:target)     .menu-tabs a[href="#cat-vegetarisch"],
.container:has(#cat-box:target)             .menu-tabs a[href="#cat-box"],
.container:has(#cat-lahmacun:target)        .menu-tabs a[href="#cat-lahmacun"],
.container:has(#cat-spezial:target)         .menu-tabs a[href="#cat-spezial"],
.container:has(#cat-salat:target)           .menu-tabs a[href="#cat-salat"],
.container:has(#cat-teig:target)            .menu-tabs a[href="#cat-teig"],
.container:has(#cat-auflauf:target)         .menu-tabs a[href="#cat-auflauf"],
.container:has(#cat-pasta:target)           .menu-tabs a[href="#cat-pasta"],
.container:has(#cat-pizza:target)           .menu-tabs a[href="#cat-pizza"],
.container:has(#cat-baguette:target)        .menu-tabs a[href="#cat-baguette"],
.container:has(#cat-pizzabroetchen:target)  .menu-tabs a[href="#cat-pizzabroetchen"],
.container:has(#cat-rollo:target)           .menu-tabs a[href="#cat-rollo"],
.container:has(#cat-drinks:target)          .menu-tabs a[href="#cat-drinks"]{
  background: var(--yellow);
  color: #111;
  border-color: var(--yellow);
}

/* Sections springen nicht unter die fixe Topbar */
.menusection{ scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* ================================================================ */

/* Alle Tabs in etwas hellerem Gelb wie der Button */
.menu-tabs a {
  background: #FFD700;   /* helleres, kräftiges Goldgelb */
  color: #111;
  border: 1px solid #FFD700;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); /* leichter Glanz-Effekt */
}

.menu-tabs a:hover {
  filter: brightness(1.15);
}
:root{
  --topbar-h: 64px;   /* deine fixe Topbar-Höhe */
  --tabs-h: 56px;     /* Default - wird per JS gleich exakt gesetzt */
}

/* Wichtig: Abstand für alle Kategorien-Abschnitte */
.menusection{
  scroll-margin-top: calc(var(--topbar-h) + var(--tabs-h) + 12px);
}
/* Gerichtsbilder ausblenden */
.menulist .thumb {
  display: none !important;
}
/* Überschrift "Extras" (und andere Kategorien) größer darstellen */
.menusection h3 {
  font-size: 1.8rem;         /* größerer Schriftgrad */
  font-weight: 900;          /* schön fett */
  text-transform: uppercase; /* alles in Großbuchstaben (optional) */
  letter-spacing: 0.03em;    /* leichte Laufweite für mehr Präsenz */
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.extras-title{
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 2rem 0 1rem;
}

.menu-image {
  width: 100%;
  max-width: 900px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  display: block;
  margin: 15px auto;
}

/* === Zusatzstoffe & Allergene – Inline-Codes ===================== */
sup.al, .al-inline {
  font-size: .68em;
  vertical-align: super;
  line-height: 0;
  margin-left: .2rem;
  font-weight: 700;
  color: #666;
}

span.al-pill {
  display: inline-block;
  font-size: .68em;
  line-height: 1;
  padding: .18em .38em;
  border-radius: .4em;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  color: #444;
  margin-left: .3rem;
}

/* Optional: Wenn du <span class="al" data-a="A1,G,1"></span> verwendest */
span.al[data-a]::after {
  content: attr(data-a);
  font-size: .68em;
  vertical-align: super;
  line-height: 0;
  color: #666;
  font-weight: 700;
  margin-left: .2rem;
}

/* === Legende unter Tabs-Leiste (nicht sticky) ===================== */
.legend-wrap {
  margin: .4rem 0 1rem;
  font-size: .82rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid #eee;
  border-radius: .6rem;
  padding: .65rem .75rem;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .35rem .9rem;
  align-items: start;
}

.legend-group h5 {
  margin: .2rem 0 .35rem;
  font-size: .86rem;
  color: #333;
}

.legend-list {
  margin: 0;
  padding-left: 1.05rem;
}

.legend-note {
  margin-top: .35rem;
  font-size: .78rem;
  color: #777;
}

/* === Zusatzstoffe & Allergene – Hochgestellt neben dem Gericht === */
sup.al {
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 0.25rem;
  line-height: 0;
  font-weight: 600;
  color: #777;
  display: inline;
}

/* Abstand und Darstellung fixen */
.menulist .meta > span sup.al {
  display: inline;
  position: relative;
  top: -0.2em;
}

/* Optional: Komma leicht enger zusammenziehen */
sup.al::before {
  content: "";
}
/* === Zusatzstoffe & Allergene – immer direkt hinter dem Gerichtsnamen === */
.menulist .meta {
  display: flex;
  flex-direction: column;
}

.menulist .meta > span {
  display: inline-flex;
  align-items: baseline; /* sorgt dafür, dass <sup> hochgestellt bleibt */
  gap: .25rem;
  flex-wrap: wrap;
}

.menulist .meta > span + sup.al {
  margin-left: .25rem;
  display: inline;
  font-size: .68em;
  vertical-align: super;
  line-height: 0;
  font-weight: 600;
  color: #666;
  position: relative;
  top: -0.2em;
}

/* Allgemeine Feinjustierung */
sup.al {
  font-size: .68em;
  vertical-align: super;
  margin-left: .25rem;
  line-height: 0;
  color: #666;
}

/* Zusatzstoffe hochgestellt rechts neben dem Gericht */
.meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.meta span {
  font-weight: 800;
}

.meta sup.al {
  font-size: 0.65em;
  vertical-align: super;
  position: relative;
  top: -0.3em;
  color: #666;
  margin-left: 0.25rem;
}

.meta em {
  display: block;
  font-style: normal;
  opacity: 0.7;
  margin-left: 0.2rem;
}

/* Legende unten */
.legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .4rem;
  font-size: 0.9rem;
  color: #333;
}
.legend li strong {
  display: inline-block;
  width: 1.4em;
  text-align: right;
  margin-right: .35em;
  color: var(--green);
}
/* ===== Name + Zusatzstoffe nebeneinander (hochgestellt) ===== */
.menulist .meta{
  display: flex;
  align-items: baseline;   /* Sup bleibt hochgestellt */
  flex-wrap: wrap;         /* bricht sauber, wenn eng */
  gap: .2rem .35rem;
}

/* Reihenfolge: 1) Name  2) Codes  3) Beschreibung */
.menulist .meta > span{ order:0; font-weight:800; }
.menulist .meta > sup.al{
  order:1;
  margin-left:.25rem;
  font-size:.68em;
  vertical-align: super;
  position: relative;
  top: -.15em;             /* bei Bedarf - höher/ + tiefer stellen */
  color:#666;
}
.menulist .meta > em{
  order:2;
  flex-basis:100%;         /* Beschreibung in neue Zeile */
  margin:0;
  opacity:.7;
  font-style: normal;
}

/* (Optional) Preis ein Tick tiefer, falls gewünscht */
.menulist strong{ transform: translateY(2px); }