/* ── Speisekarte & Bestellung ─────────────────────────────────────
   Alles über die Tokens der Website (Akzent, Grund, Fläche, Radius),
   damit der Baustein in jeder Gestaltung zu Hause aussieht. */

.lt-best__kopf{margin:0 0 22px;max-width:44rem}
.lt-best__kopf--links {text-align:left;margin-right:auto}
.lt-best__kopf--mitte {text-align:center;margin-inline:auto}
.lt-best__kopf--rechts{text-align:right;margin-left:auto}
.lt-best__kopf h2{margin:0 0 10px;font-family:var(--schrift_titel);font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.15}
.lt-best__kopf p{margin:0;color:var(--auf-flaeche-schwach);line-height:1.6}

/* Bestell-Infos als Pillen: Online bestellen, Mindestwert, Lieferung, Aktionen */
.lt-best__status{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 22px;max-width:60rem}
.lt-best__status span{font-size:.8rem;padding:6px 12px;border-radius:100px;color:var(--auf-flaeche-schwach);
  background:color-mix(in srgb, var(--best-text, var(--text)) 6%, transparent);border:1px solid var(--auf-flaeche-linie)}
.lt-best__status b{color:var(--best-text, var(--text))}
.lt-best__status .lt-best__aktion{color:var(--akzent);font-weight:700;
  background:color-mix(in srgb, var(--akzent) 12%, transparent);border-color:color-mix(in srgb, var(--akzent) 30%, transparent)}

/* ── Kategorienleiste (klebt beim Scrollen, Fade + Pfeile bei Überlauf) ── */
.lt-best__leisteH{position:sticky;top:0;z-index:20;max-width:60rem;margin:0 auto 26px;padding:10px 0;
  background:color-mix(in srgb, var(--best-grund, var(--grund)) 92%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:padding .15s ease-out}
.lt-best__leiste{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
.lt-best__leiste::-webkit-scrollbar{display:none}
.lt-best__leiste.kann-rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.lt-best__leiste.kann-links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.lt-best__leiste.kann-links.kann-rechts{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.lt-best__pille{flex:0 0 auto;white-space:nowrap;text-decoration:none;padding:7px 16px;border-radius:100px;
  font-size:.82rem;font-weight:700;color:var(--auf-flaeche-schwach);
  border:1px solid color-mix(in srgb, var(--akzent) 28%, transparent);transition:color .15s,background .15s,border-color .15s}
.lt-best__pille:hover{color:var(--akzent);background:color-mix(in srgb, var(--akzent) 10%, transparent)}
.lt-best__pille.aktiv{color:var(--best-knopf-text, var(--auf-akzent,#fff));background:var(--best-knopf, var(--akzent));border-color:var(--best-knopf, var(--akzent))}
.lt-best__pf{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;display:none;
  align-items:center;justify-content:center;cursor:pointer;border:0;color:var(--best-text, var(--text));
  background:var(--best-grund, color-mix(in srgb, var(--text) 4%, var(--grund)));box-shadow:0 1px 4px rgba(0,0,0,.2),inset 0 0 0 1px var(--auf-flaeche-linie)}
.lt-best__pf--l{left:0}.lt-best__pf--r{right:0}
.lt-best__leisteH:has(.kann-links){padding-left:38px}
.lt-best__leisteH:has(.kann-rechts){padding-right:38px}
.lt-best__leisteH:has(.kann-links) .lt-best__pf--l,.lt-best__leisteH:has(.kann-rechts) .lt-best__pf--r{display:flex}

/* ── Karte ── */
.lt-best__karte{max-width:60rem;margin:0 auto}
.lt-best__laden{text-align:center;color:var(--auf-flaeche-schwach);padding:30px 0}
.lt-best__kat{margin:0 0 38px;scroll-margin-top:120px}
.lt-best__katbild{display:block;width:100%;height:clamp(110px,18vw,180px);object-fit:cover;border-radius:var(--radius);margin:0 0 16px}
.lt-best__kattitel{margin:0 0 4px;font-family:var(--schrift_titel);font-size:clamp(1.25rem,2.6vw,1.6rem);
  display:flex;align-items:center;gap:12px}
.lt-best__kattitel::after{content:"";flex:1;height:1px;background:var(--auf-flaeche-linie)}
.lt-best__katbesch{margin:0 0 14px;color:var(--auf-flaeche-schwach);font-size:.93rem}
.lt-best__gerichte{display:grid;gap:12px;margin-top:14px}
.lt-best--raster .lt-best__gerichte{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.lt-best__gericht{display:flex;gap:16px;padding:16px;border-radius:var(--radius);
  background:var(--best-karte, color-mix(in srgb, var(--text) 3%, var(--grund)));border:1px solid var(--auf-flaeche-linie);
  color:var(--best-text, inherit);transition:border-color .15s, box-shadow .15s}
.lt-best__gericht:hover{border-color:color-mix(in srgb, var(--akzent) 40%, var(--auf-flaeche-linie))}
.lt-best__bild{flex:0 0 auto;width:104px;height:104px;object-fit:cover;border-radius:calc(var(--radius) * .7)}
.lt-best--raster .lt-best__gericht{flex-direction:column;padding:0;overflow:hidden}
.lt-best--raster .lt-best__bild{width:100%;height:170px;border-radius:0}
.lt-best--raster .lt-best__inhalt{padding:14px 16px 16px}
.lt-best__inhalt{flex:1;min-width:0;display:flex;flex-direction:column}
.lt-best__zeile{display:flex;align-items:baseline;gap:12px}
.lt-best__zeile h4{flex:1;margin:0;font-size:1.02rem;line-height:1.35}
.lt-best__nr{display:inline-block;min-width:1.6em;margin-right:6px;font-size:.78rem;font-weight:700;color:var(--best-akzent, var(--akzent))}
.lt-best__preis{flex:0 0 auto;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.lt-best__preis small{font-weight:500;color:var(--auf-flaeche-schwach)}
.lt-best__besch{margin:6px 0 0;color:var(--auf-flaeche-schwach);font-size:.88rem;line-height:1.5}
.lt-best__groessen{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.84rem;color:var(--auf-flaeche-schwach)}
.lt-best__groessen b{color:var(--best-text, var(--text))}
.lt-best__unten{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.lt-best__marken{flex:1;display:flex;flex-wrap:wrap;gap:6px}
.lt-best__marke{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:100px;
  color:#2f9e5a;background:color-mix(in srgb, #2f9e5a 12%, transparent)}
.lt-best__marke--scharf{color:#d9480f;background:color-mix(in srgb, #d9480f 12%, transparent)}
.lt-best__marke--allerg{color:var(--auf-flaeche-schwach);background:color-mix(in srgb, var(--text) 6%, transparent)}
.lt-best__dazu{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:700;
  padding:8px 14px;border:0;border-radius:var(--radius-knopf,100px);color:var(--best-knopf-text, var(--auf-akzent,#fff));background:var(--best-knopf, var(--akzent));
  transition:transform .12s ease, filter .15s}
.lt-best__dazu:hover{filter:brightness(1.06)}
.lt-best__dazu:active{transform:scale(.96)}
.lt-best__dazu.drin{animation:lt-best-drin .5s ease}
@keyframes lt-best-drin{40%{transform:scale(1.12)}}
.lt-best__hinweis{max-width:60rem;margin:6px auto 0;text-align:center;font-size:.82rem;color:var(--auf-flaeche-schwach)}

/* ── Warenkorb-Knopf (schwebt unten rechts) ── */
.lt-best-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:12px 18px 12px 14px;border:0;border-radius:100px;font:inherit;font-weight:700;
  color:var(--auf-akzent,#fff);background:var(--akzent);box-shadow:0 10px 30px rgba(0,0,0,.28);
  transform:translateY(120px);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.3,.7,.2,1),opacity .2s}
.lt-best-fab.sichtbar{transform:none;opacity:1;pointer-events:auto}
.lt-best-fab.hupf{animation:lt-best-hupf .45s ease}
@keyframes lt-best-hupf{30%{transform:scale(1.1)}}
.lt-best-fab__n{min-width:22px;height:22px;padding:0 6px;border-radius:100px;font-size:.75rem;display:grid;place-items:center;
  background:var(--auf-akzent,#fff);color:var(--akzent)}
.lt-best-fab__s{font-variant-numeric:tabular-nums}

/* ── Schublade ── */
html.lt-best-gesperrt,html.lt-best-gesperrt body{overflow:hidden}
.lt-best-ov{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s}
.lt-best-ov.auf{opacity:1;pointer-events:auto}
.lt-best-dr{position:fixed;top:0;right:0;bottom:0;z-index:960;width:min(420px,100%);display:flex;flex-direction:column;
  background:var(--grund);color:var(--text);box-shadow:-20px 0 50px rgba(0,0,0,.3);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.3,.7,.2,1)}
.lt-best-dr.auf{transform:none}
.lt-best-dr__kopf{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--auf-flaeche-linie)}
.lt-best-dr__kopf h3{margin:0;font-size:1.15rem}
.lt-best-dr__zu{border:0;background:none;color:var(--text);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 4px}
.lt-best-dr__leib{flex:1;overflow-y:auto;padding:16px 20px}
.lt-best-dr__fuss{padding:16px 20px 20px;border-top:1px solid var(--auf-flaeche-linie)}
.lt-best-dr__fuss:empty{display:none}
.lt-best-leer{text-align:center;color:var(--auf-flaeche-schwach);padding:40px 0}
.lt-best-pos{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--auf-flaeche-linie)}
.lt-best-pos__t{flex:1;min-width:0}
.lt-best-pos__t b{display:block;font-size:.95rem}
.lt-best-pos__t small{display:block;color:var(--auf-flaeche-schwach);font-size:.8rem;margin-top:2px}
.lt-best-pos__p{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.lt-best-pos__p s{display:block;font-weight:400;font-size:.8rem;color:var(--auf-flaeche-schwach)}
.lt-best-menge{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--auf-flaeche-linie);border-radius:100px;padding:2px}
.lt-best-menge button{width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--text);font-size:1.05rem;cursor:pointer}
.lt-best-menge button:hover{background:color-mix(in srgb, var(--text) 8%, transparent)}
.lt-best-menge b{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.lt-best-menge--klein{margin-top:8px}
.lt-best-menge--klein button{width:26px;height:26px}
.lt-best-z{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;padding:3px 0;color:var(--auf-flaeche-schwach)}
.lt-best-z--rab{color:#2f9e5a}
.lt-best-z--ges{color:var(--text);font-size:1.05rem;padding-top:8px;margin-top:4px;border-top:1px solid var(--auf-flaeche-linie)}
.lt-best-tip{margin:6px 0 0;font-size:.8rem;color:var(--auf-flaeche-schwach)}
.lt-best-warn,.lt-best-meld{margin:8px 0 0;font-size:.84rem;color:#e5484d;font-weight:600}
.lt-best-knopf{display:block;width:100%;margin-top:14px;padding:13px 16px;border:0;border-radius:var(--radius-knopf,10px);cursor:pointer;
  font:inherit;font-weight:700;color:var(--auf-akzent,#fff);background:var(--akzent)}
.lt-best-knopf:disabled{opacity:.5;cursor:not-allowed}
.lt-best-knopf--leise{margin-top:6px;background:none;color:var(--auf-flaeche-schwach);font-weight:600}
.lt-best-wahl{display:flex;gap:8px;margin-bottom:14px}
.lt-best-wahl label{flex:1;cursor:pointer}
.lt-best-wahl input{position:absolute;opacity:0;pointer-events:none}
.lt-best-wahl span{display:block;text-align:center;padding:10px;border-radius:10px;font-weight:700;font-size:.9rem;
  border:1px solid var(--auf-flaeche-linie);transition:all .15s}
.lt-best-wahl input:checked+span{color:var(--auf-akzent,#fff);background:var(--akzent);border-color:var(--akzent)}
.lt-best-wahl input:focus-visible+span{outline:2px solid var(--akzent);outline-offset:2px}
.lt-best-f{display:block;margin:0 0 12px}
.lt-best-f[hidden]{display:none}
.lt-best-f>span{display:block;font-size:.8rem;font-weight:700;margin-bottom:5px}
.lt-best-f small{font-weight:400;color:var(--auf-flaeche-schwach)}
.lt-best-f input,.lt-best-f textarea{width:100%;box-sizing:border-box;padding:10px 12px;font:inherit;color:var(--text);
  background:color-mix(in srgb, var(--text) 4%, var(--grund));border:1px solid var(--auf-flaeche-linie);border-radius:var(--radius-feld,8px)}
.lt-best-f input:focus,.lt-best-f textarea:focus{outline:none;border-color:var(--akzent)}
.lt-best-fertig{text-align:center;padding:30px 6px}
.lt-best-fertig svg{color:var(--akzent)}
.lt-best-fertig b{display:block;font-size:1.25rem;margin:10px 0 6px}
.lt-best-leise{color:var(--auf-flaeche-schwach);font-size:.9rem}

/* ── Größe & Extras ── */
.lt-best-cfg{position:fixed;inset:0;z-index:970;display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;transition:opacity .18s}
.lt-best-cfg.auf{opacity:1}
.lt-best-cfg__fl{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.lt-best-cfg__k{position:relative;width:min(440px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--grund);color:var(--text);border-radius:var(--radius);box-shadow:0 30px 70px rgba(0,0,0,.35);
  transform:translateY(12px);transition:transform .22s cubic-bezier(.3,.7,.2,1)}
.lt-best-cfg.auf .lt-best-cfg__k{transform:none}
.lt-best-cfg__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--auf-flaeche-linie)}
.lt-best-cfg__kopf strong{font-size:1.08rem}
.lt-best-cfg__zu{border:0;background:none;color:var(--text);font-size:1.7rem;line-height:1;cursor:pointer}
.lt-best-cfg__leib{overflow-y:auto;padding:8px 18px}
.lt-best-cfg__grp{padding:10px 0}
.lt-best-cfg__grp>span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--auf-flaeche-schwach);margin-bottom:6px}
.lt-best-cfg__x{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;border-bottom:1px solid color-mix(in srgb, var(--text) 6%, transparent)}
.lt-best-cfg__x input{accent-color:var(--akzent);width:18px;height:18px}
.lt-best-cfg__x span{flex:1}
.lt-best-cfg__x em{font-style:normal;font-size:.86rem;color:var(--auf-flaeche-schwach);font-variant-numeric:tabular-nums}
.lt-best-cfg__fuss{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--auf-flaeche-linie)}
.lt-best-cfg__ok{flex:1;padding:12px 14px;border:0;border-radius:var(--radius-knopf,10px);cursor:pointer;font:inherit;font-weight:700;
  color:var(--auf-akzent,#fff);background:var(--akzent)}

@media (max-width:600px){
  .lt-best__gericht{padding:12px;gap:12px}
  .lt-best__bild{width:84px;height:84px}
  .lt-best__dazu span{display:none}
  .lt-best__dazu{padding:9px}
  .lt-best-fab{right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  .lt-best-fab,.lt-best-dr,.lt-best-cfg,.lt-best-cfg__k,.lt-best__dazu{transition:none;animation:none}
}

/* ── Hintergrund des Bausteins (Feld „Hintergrund“) ──────────────
   Die Flächenfarbe selbst kommt aus _basis.css (lt-flaeche--…) bzw.
   aus dem style-Attribut (eigene Farbe). Hier nur, was der Baustein
   darauf braucht: Abstand, Karten, Knöpfe, Klebeleiste. */
.lt-best--hinterlegt{padding-block:clamp(48px,7vw,90px)}
.lt-best.lt-flaeche--flaeche{--best-grund:color-mix(in srgb, var(--text) 4%, var(--grund));--best-karte:color-mix(in srgb, var(--grund) 75%, transparent)}
.lt-best.lt-flaeche--akzent-zart{--best-grund:color-mix(in srgb, var(--akzent) 12%, var(--grund));--best-karte:color-mix(in srgb, var(--grund) 70%, transparent)}
.lt-best.lt-flaeche--akzent{--best-grund:color-mix(in srgb, var(--akzent) 8%, var(--grund));--best-karte:color-mix(in srgb, var(--grund) 75%, transparent)}
.lt-best.lt-flaeche--akzent-voll,
.lt-best.lt-flaeche--akzent-verlauf{--best-grund:var(--akzent);--best-text:var(--auf-akzent,#fff);
  --best-karte:color-mix(in srgb, var(--auf-akzent,#fff) 12%, transparent);
  --best-knopf:var(--auf-akzent,#fff);--best-knopf-text:var(--akzent)}
.lt-best.lt-flaeche--dunkel,
.lt-best.lt-flaeche--dunkel-verlauf{--best-grund:#1b1f26;--best-text:#f4f6f8;--best-karte:rgba(255,255,255,.06)}
.lt-best--eigen-hell{color:#1b1f23;--best-text:#1b1f23;--best-karte:rgba(255,255,255,.55);
  --auf-flaeche-schwach:rgba(0,0,0,.62);--auf-flaeche-linie:rgba(0,0,0,.12)}
.lt-best--eigen-dunkel{color:#f4f6f8;--best-text:#f4f6f8;--best-karte:rgba(255,255,255,.08);
  --auf-flaeche-schwach:rgba(255,255,255,.66);--auf-flaeche-linie:rgba(255,255,255,.16)}
.lt-best--hinterlegt .lt-best__kopf h2{color:var(--best-text, inherit)}
.lt-best--hinterlegt .lt-best__pille{color:var(--auf-flaeche-schwach);border-color:var(--auf-flaeche-linie)}
.lt-best--hinterlegt .lt-best__pille.aktiv{color:var(--best-knopf-text, var(--auf-akzent,#fff));border-color:transparent}
.lt-best.lt-flaeche--akzent-voll,.lt-best.lt-flaeche--akzent-verlauf{--best-akzent:var(--auf-akzent,#fff)}
.lt-best.lt-flaeche--dunkel,.lt-best.lt-flaeche--dunkel-verlauf,.lt-best--eigen-dunkel{--best-akzent:color-mix(in oklab, var(--akzent) 62%, #fff)}
.lt-best.lt-flaeche--akzent-voll .lt-best__marke,.lt-best.lt-flaeche--akzent-verlauf .lt-best__marke{
  color:var(--auf-akzent,#fff);background:color-mix(in srgb, var(--auf-akzent,#fff) 14%, transparent)}

/* ── Fenster „Größe & Extras“: ruhigere Ecken, Gericht mit Bild oben ── */
.lt-best-cfg__k{border-radius:min(var(--radius,12px), 14px);overflow:hidden}
.lt-best-cfg__bild{flex:0 0 auto;height:clamp(140px,26vh,210px);background:color-mix(in srgb, var(--text) 6%, transparent)}
.lt-best-cfg__bild img{width:100%;height:100%;object-fit:cover;display:block}
.lt-best-cfg__kopf{align-items:flex-start;padding:16px 18px 14px}
.lt-best-cfg__titel{flex:1;min-width:0}
.lt-best-cfg__titel strong{display:block;font-size:1.12rem;line-height:1.3}
.lt-best-cfg__titel p{margin:5px 0 0;font-size:.86rem;line-height:1.5;color:var(--auf-flaeche-schwach, rgba(0,0,0,.6))}
.lt-best-cfg__ab{display:inline-block;margin-top:8px;font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums}
.lt-best-cfg__zu{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;
  background:color-mix(in srgb, var(--text) 7%, var(--grund))}
/* Mit Bild: Schließen-Knopf schwebt oben rechts auf dem Bild */
.lt-best-cfg__kopf.mit-bild .lt-best-cfg__zu{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);color:#111;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.lt-best-cfg__x{border-radius:0}

/* Gerichtsbilder immer ganz zeigen - eingepasst, nie angeschnitten.
   Die Fläche dahinter füllt den Rest ruhig auf. */
.lt-best__bild,
.lt-best--raster .lt-best__bild,
.lt-best-cfg__bild img{object-fit:contain;
  background:color-mix(in srgb, var(--best-text, var(--text)) 5%, transparent)}
/* Raster: Bild über die volle Kartenbreite in seinem eigenen Format -
   kein Leerraum links und rechts. Erst ab 300 px Höhe wird es (oben und
   unten minimal) beschnitten, damit hohe Fotos die Karte nicht sprengen.
   Bis das Bild geladen ist, hält aspect-ratio den Platz. */
.lt-best--raster .lt-best__bild{height:auto;max-height:300px;aspect-ratio:4/3;object-fit:cover}
.lt-best--raster .lt-best__bild.geladen{aspect-ratio:auto}
.lt-best-cfg__bild{background:color-mix(in srgb, var(--text) 5%, var(--grund))}

/* Knöpfe folgen der Website-Einstellung (Design → Eckenrundung der
   Knöpfe) - nur das Fenster selbst ist in der Rundung begrenzt. */
.lt-best-cfg__ok,.lt-best-knopf{border-radius:var(--radius-knopf,10px)}
.lt-best-menge{border-radius:var(--radius-knopf,100px)}
/* Haupt-Knöpfe wie die Website-Knöpfe (.lt-btn): Akzentschatten,
   beim Überfahren leicht abgedunkelt und angehoben. */
.lt-best-cfg__ok,.lt-best-knopf:not(.lt-best-knopf--leise){
  box-shadow:var(--schatten-knopf, 0 2px 4px rgba(15,20,28,.12), 0 8px 20px color-mix(in srgb, var(--akzent,#2e6f4e) 35%, transparent));
  transition:transform .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out}
.lt-best-cfg__ok:hover,.lt-best-knopf:not(.lt-best-knopf--leise):not(:disabled):hover{transform:translateY(-1px);
  background:color-mix(in srgb, var(--akzent,#2e6f4e) 88%, #000);
  box-shadow:var(--schatten-knopf-hover, 0 4px 8px rgba(15,20,28,.14), 0 12px 28px color-mix(in srgb, var(--akzent,#2e6f4e) 45%, transparent))}
.lt-best__dazu:hover{background:color-mix(in srgb, var(--best-knopf, var(--akzent)) 88%, #000);filter:none}
@media (prefers-reduced-motion:reduce){.lt-best-cfg__ok:hover,.lt-best-knopf:hover{transform:none}}

/* ── Klebende Kategorienleiste: eigene Zeile unter der Kopfleiste ──
   Vorher hing sie halbdurchsichtig im Schatten der Kopfleiste. Jetzt,
   sobald sie klebt: über die volle Breite, fester Grund der Fläche,
   über dem Kopfleisten-Schatten (z-index 51 > 50) und mit eigenem,
   weichem Schatten nach unten. */
.lt-best__leisteH.klebt{z-index:51;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-block:12px}
.lt-best__leisteH.klebt::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;
  background:var(--best-grund, var(--grund));
  border-bottom:1px solid var(--auf-flaeche-linie, rgba(0,0,0,.08));
  box-shadow:0 12px 24px -14px rgba(0,0,0,.35)}
.lt-best__leisteH.klebt .lt-best__pf{background:var(--best-grund, var(--grund))}
/* Kopfleiste "Angepasst": Leiste und Kopfleiste als ein gemeinsames
   Milchglas-Band - derselbe Hauch der Fläche mit Weichzeichner wie
   die Kopfleiste über dem Rest der Seite, ohne Kante dazwischen. */
.lt-best__leisteH.klebt.glas::before{
  background:color-mix(in srgb, var(--best-grund, var(--grund)) 62%, transparent);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:0;box-shadow:none}
.lt-best__leisteH.klebt.glas .lt-best__pf{background:color-mix(in srgb, var(--best-grund, var(--grund)) 85%, transparent)}

/* Transparente Kopfleiste über der Speisekarte: gleiche Farbe wie die
   klebende Kategorienleiste (Klasse setzt das Skript des Bausteins).
   !important, weil die Kopfleisten-Regeln mehrfach verkettete Klassen
   tragen und je nach Einstellung anders gewichten. */
.lt-navi.lt-best-unter{background:var(--lt-best-navi-grund) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-bottom-color:transparent !important;box-shadow:none !important;transition:background .2s ease}
.lt-navi.lt-best-unter::before{display:none !important}
.lt-navi.lt-best-unter--hell :is(.lt-navi__marke,.lt-navi__marke *,.lt-navi__name,.lt-thema,.lt-navi__burger){color:#1a1c20 !important}
.lt-navi.lt-best-unter--dunkel :is(.lt-navi__marke,.lt-navi__marke *,.lt-navi__name,.lt-thema,.lt-navi__burger){color:#fff !important}
@media (min-width:821px){
  .lt-navi.lt-best-unter--hell :is(.lt-navi__liste--1 > li > a,.lt-navi__liste--1 > li > .lt-navi__klapp,.lt-navi__liste--1 > li > .lt-navi__auf){color:#1a1c20 !important}
  .lt-navi.lt-best-unter--dunkel :is(.lt-navi__liste--1 > li > a,.lt-navi__liste--1 > li > .lt-navi__klapp,.lt-navi__liste--1 > li > .lt-navi__auf){color:#fff !important}
}

/* ── Nur-Speisekarte-Seite: Kategorien in der Zeile der Kopfleiste ──
   Das Skript setzt die Leiste direkt hinter das Logo; sie nimmt den
   freien Platz bis zum Schalter bzw. Burger und scrollt darin, die
   Kopfleiste bleibt so niedrig wie immer. Die Pillen richten sich nach
   deren Schriftfarbe (currentColor) - so passen sie zu jeder Leiste. */
.lt-navi__zeile > .lt-best__leisteH.in-navi{position:relative;top:auto;z-index:auto;
  flex:1 1 auto;min-width:0;max-width:none;margin:0;padding:0;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-sizing:border-box}
.lt-navi__zeile > .lt-best__leisteH.in-navi:has(.kann-links){padding-left:36px}
.lt-navi__zeile > .lt-best__leisteH.in-navi:has(.kann-rechts){padding-right:36px}
.lt-navi__zeile > .lt-best__leisteH.in-navi .lt-best__pf{width:28px;height:28px;color:inherit;
  background:color-mix(in srgb, currentColor 16%, transparent);box-shadow:none}
.lt-navi__zeile > .lt-best__leisteH.in-navi .lt-best__pille{color:inherit;opacity:.9;padding:6px 14px;
  border-color:color-mix(in srgb, currentColor 30%, transparent)}
.lt-navi__zeile > .lt-best__leisteH.in-navi .lt-best__pille:hover{opacity:1;color:inherit;
  background:color-mix(in srgb, currentColor 12%, transparent)}
.lt-navi__zeile > .lt-best__leisteH.in-navi .lt-best__pille.aktiv{opacity:1;
  color:var(--auf-akzent,#fff);background:var(--akzent);border-color:var(--akzent)}
/* Auf einer Leiste in Akzentfarbe wäre die Akzent-Pille unsichtbar:
   umgedreht. */
.lt-navi--akzent .lt-best__leisteH.in-navi .lt-best__pille.aktiv,
.lt-navi--akzent-verlauf .lt-best__leisteH.in-navi .lt-best__pille.aktiv{
  color:var(--akzent);background:var(--auf-akzent,#fff);border-color:var(--auf-akzent,#fff)}
/* Gibt es zusätzlich ein Menü, steht es nicht mehr mittig darüber,
   sondern im Fluss rechts neben den Kategorien. */
@media(min-width:821px){
  .lt-navi--mit-karte .lt-navi__zeile > nav{position:static;transform:none;flex:0 0 auto;margin-left:8px}
}