/*
Theme Name: Leckerbiss
Theme URI: https://leckerbiss-muensterland.de/
Author: Freenet Pro
Description: Leichte, individuelle WordPress-Theme für Leckerbiss. ACF- und Yoast-kompatibel.
Version: 1.4.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: leckerbiss
*/

:root{
  --paper:#F0EDEA;
  --ink:#111010;
  --accent:#7A816A;
  --accent-active:#5D5D5D;
  --line:#BDB7B2;
  --muted:#5D5D5D;
  --overlay:#11101099;
  --dark:#000000;
}
*{box-sizing:border-box}
html{scroll-padding-top:26px}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:"Commissioner",Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}








.chevron::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}



.hero{height:680px;position:relative;display:flex;justify-content:center;align-items:center;padding-top:92px}
.hero-title{display:grid;grid-template-columns:170px auto 170px;align-items:center;gap:24px;transform:translateY(10px)}
.hero-title > span{text-align:center;font-size:14px;font-family:"Commissioner",Arial,Helvetica,sans-serif;letter-spacing:.04em;text-transform:uppercase}.hero h1{margin:0;font-family:"Marcellus",Georgia,"Times New Roman",serif;font-size:89px;line-height:.9;font-weight:400;letter-spacing:-4px}

.food-visual{
  --photo-scale:1.02;
  --photo-y:0px;
  height:75vh;
  min-height:520px;
  width:100%;
  position:relative;
  z-index:40;
  overflow:hidden;
  isolation:isolate;
  background:var(--paper);
}
.food-visual::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-7%;
  background:url("assets/interior.webp") center center/cover no-repeat;
  transform:translate3d(0,var(--photo-y),0) scale(var(--photo-scale));
  transform-origin:center center;
  filter:saturate(1.035) contrast(1.015);
  will-change:transform;
  backface-visibility:hidden;
}
.food-visual .category-dock{z-index:40}
.category-dock{position:absolute;left:0;right:0;bottom:28px;z-index:40;display:flex;justify-content:center;pointer-events:none;opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s ease,visibility .22s ease,transform .22s ease}
.category-dock.is-fixed{position:fixed;bottom:28px}.category-dock.is-hidden{opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none}
.category-nav{display:flex;width:min(1080px,calc(100vw - 80px));height:52px;background:var(--accent);border-radius:4px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.10);pointer-events:auto}
.category-nav a{flex:0 0 auto;min-width:0;height:52px;padding:0 11px;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(17,16,16,.12);font-family:"Marcellus",Georgia,"Times New Roman",serif;font-size:12px;line-height:1.05;white-space:nowrap;text-align:center;transition:background .2s,color .2s}
.category-nav a:last-child{border-right:0}.category-nav a:hover,.category-nav a.active{background:var(--accent-active);color:#fff}

.menu-sections{background:var(--paper)}
.menu-section{display:grid;grid-template-columns:40% 60%;border-top:1px solid var(--line);scroll-margin-top:18px}
.menu-section:last-child{border-bottom:1px solid var(--line)}
.section-intro{padding:34px 36px 40px;border-right:1px solid var(--line)}
.section-intro h2{margin:0 0 18px;font-family:"Marcellus",Georgia,"Times New Roman",serif;font-size:54px;line-height:1;font-weight:400;letter-spacing:-2px}
.section-intro p{margin:0;max-width:360px;font-size:18px;line-height:1.6}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;align-content:start}
.menu-grid article,.menu-grid .empty-cell{min-height:132px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.menu-grid article{padding:24px 25px 22px;display:flex;gap:18px;justify-content:space-between;align-items:flex-start}
.menu-grid article:nth-child(2n),.menu-grid .empty-cell:nth-child(2n){border-right:0}
.menu-grid article:nth-last-child(-n/**/+2),.menu-grid .empty-cell:nth-last-child(-n/**/+2){border-bottom:0}
.item-copy{min-width:0}.menu-grid h3{margin:0;font-size:15px;line-height:1.35;font-weight:700;font-family:"Commissioner",Arial,Helvetica,sans-serif}.menu-grid p{margin:8px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
.price{font-size:13px;line-height:1.35;white-space:nowrap;font-weight:700;text-align:right;font-family:"Commissioner",Arial,Helvetica,sans-serif}.price-empty{display:block;width:1px}.price-multi{display:flex;flex-direction:column;gap:7px}.price-multi span{display:flex;gap:8px;justify-content:flex-end}.price-multi small{font-size:10px;font-weight:400;color:var(--muted)}
























@media(max-width:1200px){
  
  .category-nav{width:calc(100vw - 48px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}.category-nav::-webkit-scrollbar{display:none}.category-nav a{flex:0 0 auto;min-width:max-content;padding:0 18px;font-size:13px}
  .menu-section{grid-template-columns:34% 66%}.section-intro h2{font-size:44px}
}
@media(max-width:780px){
  html{scroll-padding-top:72px}
  
  
  .hero{height:600px;padding:100px 22px 0}.hero-title{grid-template-columns:1fr;gap:16px;transform:none}.hero-title > span:first-child{order:1}.hero h1{order:2;font-size:58px;letter-spacing:-2px}.hero-title > span:last-child{order:3}
  .food-visual{height:75vh;min-height:420px}.category-dock,.category-dock.is-fixed{bottom:14px}.category-nav{width:calc(100vw - 28px);height:45px}.category-nav a{height:45px;padding:0 17px;font-size:14px}
  .menu-section{display:block}.section-intro{padding:38px 22px 28px;border-right:0;border-bottom:1px solid var(--line)}.section-intro h2{font-size:38px;letter-spacing:-1.4px}.menu-grid{grid-template-columns:1fr}.menu-grid article,.menu-grid .empty-cell{min-height:104px;border-right:0}.menu-grid article{padding:22px}.menu-grid .empty-cell{display:none}.menu-grid article:nth-last-child(-n/**/+2){border-bottom:1px solid var(--line)}.menu-grid article:last-of-type{border-bottom:0}
  
}


/* Category panel: separated cells with precise, even geometry. */
.category-nav{
  gap:1px;
  padding:1px;
  background:rgba(17,16,16,.14);
  border:1px solid rgba(17,16,16,.10);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
}
.category-nav::-webkit-scrollbar{display:none}
.category-nav a{
  flex:0 0 auto;
  height:48px;
  background:var(--accent);
  border:0;
}
.category-nav a:first-child{border-radius:3px 0 0 3px}
.category-nav a:last-child{border-radius:0 3px 3px 0}
.category-nav a:hover,
.category-nav a.active{background:var(--accent-active);color:#fff}

/* The category title stays with its own menu and is released at the section end. */
.section-intro{position:relative;border-right:1px solid var(--line)}
.section-intro-inner{
  position:sticky;
  top:30px;
  align-self:start;
  transition:transform .18s ease-out;
  will-change:transform;
}

@media(max-width:1200px){
  .category-nav{padding:1px;gap:1px}
  .category-nav a{height:48px}
}

@media(max-width:780px){
  .category-nav{height:47px;padding:1px;gap:1px}
  .category-nav a{height:43px}
  .section-intro-inner{position:static;top:auto;transition:none}
}

/* Exact vertical spacing from the reference: photo -> first category,
   category -> category, and final category -> footer. */
.menu-sections{
  padding-top:176px;
  padding-bottom:154px;
}
.menu-section + .menu-section{
  margin-top:36px;
}

/* Reference lines are deliberately subtle. */
:root{
  --line:rgba(17,16,16,.10);
}
.menu-section,
.menu-section:last-child,
.section-intro,
.menu-grid article,
.menu-grid .empty-cell{
  border-color:var(--line);
}

@media(max-width:780px){
  .menu-sections{
    padding-top:88px;
    padding-bottom:88px;
  }
  .menu-section + .menu-section{
    margin-top:24px;
  }
}

/* Full-width closing line at the bottom of every menu section. */
.menu-section{
  border-bottom:1px solid var(--line);
}

/* Numbering used only in the Schnitzelgerichte section. */
.numbered-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.item-number{font-family:"Commissioner",Arial,Helvetica,sans-serif;font-size:12px;line-height:1.35;font-weight:700;color:var(--muted)}


/* --- menu refinement: readable desktop bar + mobile arrow controls --- */
.category-strip{
  display:flex;
  align-items:center;
  gap:0;
  width:min(1120px, calc(100vw - 84px));
  pointer-events:auto;
}
.category-scroller{
  flex:1 1 auto;
  min-width:0;
  padding:1px;
  border:1px solid rgba(90,43,18,.14);
  border-radius:6px;
  background:rgba(242,239,233,.22);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.category-arrow{
  display:none;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid rgba(17,16,16,.08);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  align-items:center;
  justify-content:center;
  font:600 22px/1 "Commissioner", Arial, sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  cursor:pointer;
  transition:opacity .2s ease, background .2s ease;
}
.category-arrow:hover{background:#fff;}
.category-arrow:disabled{opacity:.35; cursor:default;}
.category-nav{
  width:100%;
  padding:0;
  gap:1px;
  height:48px;
  background:transparent;
  border:0;
  box-shadow:none;
}
.category-nav a{
  min-width:max-content;
  height:48px;
  padding:0 14px;
  font-size:14px;
  line-height:1.1;
  border-radius:0;
  background:#5a2b12;
  color:#f2efe9;
  border:0;
}
.category-nav a:hover,
.category-nav a.active{
  background:#ffffff;
  color:#5a2b12;
}
.category-nav a:first-child{border-radius:4px 0 0 4px;}
.category-nav a:last-child{border-radius:0 4px 4px 0;}
@media(max-width:1200px){
  .category-strip{width:calc(100vw - 48px);}
  .category-nav a{padding:0 13px; font-size:13px;}
}
@media(max-width:780px){
  .category-dock,.category-dock.is-fixed{bottom:14px;}
  .category-strip{width:calc(100vw - 16px); gap:8px;}
  .category-scroller{padding:1px;}
  .category-arrow{display:inline-flex;}
  .category-nav{height:44px;}
  .category-nav a{height:44px; padding:0 13px; font-size:13px;}
}

/* --- targeted correction: category headings and dish typography --- */
/* Keep every heading in the layout, reveal it once at 50% viewport,
   and animate letters individually without clipping or white masks. */
.section-intro h2{
  font-family:"Marcellus",Georgia,"Times New Roman",serif;
  opacity:1;
  visibility:visible;
}
.section-intro h2.text-split .word{
  display:inline-block;
}
.section-intro h2.text-split .char{
  display:inline-block;
  opacity:0;
  transform:none;
  transition:opacity .82s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--char-index, 0) * 70ms);
  will-change:opacity;
}
.section-intro h2.is-revealed .char{
  opacity:1;
  transform:none;
}

/* Desktop category bar: all items remain readable and the final item fits. */
.category-strip{
  width:min(1320px,calc(100vw - 72px));
}
.category-scroller{
  overflow:hidden;
}
.category-nav{
  width:100%;
  display:flex;
  gap:1px;
  padding:1px;
}
.category-nav a{
  flex:1 1 auto;
  min-width:0;
  padding:0 10px;
  font-size:13px;
  letter-spacing:0;
}

/* Number, dish name and price: one font and one size. */
.menu-grid h3,
.item-number,
.price{
  font-family:"Commissioner",Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.4;
}
.menu-grid h3{
  font-weight:700;
}
.item-number{
  font-weight:600;
  color:var(--muted);
}
.price{
  font-weight:700;
}

@media(max-width:1200px){
  .category-strip{width:calc(100vw - 48px)}
  .category-nav{overflow-x:auto;overflow-y:hidden}
  .category-nav a{flex:0 0 auto;min-width:max-content;padding:0 13px;font-size:13px}
}

@media(max-width:780px){
  .category-strip{width:calc(100vw - 16px)}
  .category-scroller{overflow:hidden}
  .category-nav{overflow-x:auto;overflow-y:hidden}
  .category-nav a{font-size:13px;padding:0 13px}
  .menu-grid h3,
  .item-number,
  .price{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .section-intro h2.text-split .char{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* Prevent glyph descenders from being clipped during the per-letter animation. */
.section-intro h2{
  line-height:1.16;
  padding-bottom:.08em;
}
.section-intro h2.text-split,
.section-intro h2.text-split .word,
.section-intro h2.text-split .char{
  overflow:visible;
}


/* Hero H1 load animation: same per-letter fade, triggered once on page load. */
.hero h1.text-split .word{
  display:inline-block;
}
.hero h1.text-split .char{
  display:inline-block;
  opacity:0;
  transform:none;
  transition:opacity .82s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--char-index, 0) * 70ms);
  will-change:opacity;
}
.hero h1.is-revealed .char{
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .hero h1.text-split .char{
    opacity:1;
    transition:none;
  }
}

/* Desktop menu columns: only Schnitzelgerichte, Burgergerichte and Angebote use two columns. */
@media (min-width:781px){
  .menu-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .menu-grid .empty-cell{
    display:none;
  }

  .menu-grid article,
  .menu-grid article:nth-child(2n),
  .menu-grid article:nth-last-child(-n/**/+2){
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .menu-grid article:last-child{
    border-bottom:0;
  }

  #schnitzelgerichte .menu-grid,
  #burgergerichte .menu-grid,
  #angebote .menu-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #schnitzelgerichte .menu-grid article,
  #burgergerichte .menu-grid article,
  #angebote .menu-grid article{
    border-right:1px solid var(--line);
  }

  #schnitzelgerichte .menu-grid article:nth-child(2n),
  #burgergerichte .menu-grid article:nth-child(2n),
  #angebote .menu-grid article:nth-child(2n){
    border-right:0;
  }

  #schnitzelgerichte .menu-grid article:nth-last-child(-n/**/+2),
  #burgergerichte .menu-grid article:nth-last-child(-n/**/+2),
  #angebote .menu-grid article:nth-last-child(-n/**/+2){
    border-bottom:0;
  }
}

/* Compact dish rows: only number, dish name and price use 20px / 500. */
.menu-grid article{
  min-height:104px;
  padding:16px 22px;
}
.menu-grid h3,
.item-number,
.price{
  font-family:"Commissioner",Arial,Helvetica,sans-serif;
  font-size:20px;
  line-height:1.25;
  font-weight:500;
}
.menu-grid h3,
.item-number,
.price{
  font-weight:500;
}
.menu-grid p{
  margin-top:6px;
}
.numbered-item{
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
}

@media(max-width:780px){
  .menu-grid article{
    min-height:96px;
    padding:15px 18px;
  }
  .menu-grid h3,
  .item-number,
  .price{
    font-size:20px;
    font-weight:500;
  }
}

/* Vertically center each dish row without changing typography or spacing. */
.menu-grid article{
  align-items:center;
}


@media(prefers-reduced-motion:reduce){
  .food-visual{--photo-scale:1.04;--photo-y:0px}
}


/* Final paper background: one solid warm base with very subtle speckles. */
:root{
  --paper:#F2EFE9;
  --line:rgba(17,16,16,.085);
}
body{
  background-color:var(--paper);
  background-image:url("assets/paper-speckles.png");
  background-repeat:repeat;
  background-size:720px 720px;
}
.hero,
.menu-sections,
.menu-section,
.section-intro,
.menu-grid,
.menu-grid article,
.menu-grid .empty-cell{
  background-color:transparent;
  background-image:none;
}
.category-dock{pointer-events:none;}
.category-strip,
.category-scroller,
.category-nav,
.category-nav a,
.category-arrow{pointer-events:auto;}
.category-nav a{cursor:pointer;}

/* Subtle dish-card hover: only on devices with a real pointer. */
@media (hover:hover) and (pointer:fine){
  .menu-grid article{
    transition:background-color .22s ease;
  }
  .menu-grid article:hover{
    background-color:rgba(122,129,106,.10);
  }
}


/* Header menu in uppercase + reservation link to phone */



/* Styled reservation button in header */





/* Shared header: full-width bar with centered inner content */









/* Header width correction: navigation must fill only remaining inner space. */





/* Footer redesign with social links */








































/* Footer requested cleanup */




/* Footer bottom row: improved legibility and developer credit. */








/* Footer bottom row refinement: one clean, balanced baseline. */
















/* Footer notes under social icons + centered developer credit. */















/* ===== Mobile Bottom Navigation ===== */
.mobile-bottom-nav{
  display:none;
}

@media(max-width:780px){
  body{padding-bottom:78px;}

  .mobile-bottom-nav{
    display:flex;
    align-items:center;
    justify-content:space-around;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:60;
    background:rgba(240,237,234,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(17,16,16,.08);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }

  .mbn-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    flex:1;
    background:none;
    border:none;
    text-decoration:none;
    padding:6px 0;
    font-family:"Commissioner",Arial,Helvetica,sans-serif;
    cursor:pointer;
  }

  .mbn-circle{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    transition:background-color .2s ease, transform .2s ease;
  }

  .mbn-circle svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:var(--muted);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke .2s ease;
  }

  .mbn-circle img{
    width:19px;
    height:19px;
    object-fit:contain;
    filter:grayscale(1) opacity(.55);
    transition:filter .2s ease;
  }

  .mbn-label{
    font-size:11px;
    color:var(--muted);
    font-weight:500;
    transition:color .2s ease;
  }

  /* Hover / focus / active */
  .mbn-item:hover .mbn-circle,
  .mbn-item:focus-visible .mbn-circle,
  .mbn-item:active .mbn-circle{
    background:var(--accent);
    transform:translateY(-2px);
  }
  .mbn-item:active .mbn-circle{transform:scale(.94);}
  .mbn-item:hover .mbn-circle svg,
  .mbn-item:focus-visible .mbn-circle svg,
  .mbn-item:active .mbn-circle svg{
    stroke:#fff;
  }
  .mbn-item:hover .mbn-circle img,
  .mbn-item:focus-visible .mbn-circle img,
  .mbn-item:active .mbn-circle img{
    filter:none;
  }
  .mbn-item:hover .mbn-label,
  .mbn-item:focus-visible .mbn-label,
  .mbn-item:active .mbn-label{
    color:var(--ink);
    font-weight:600;
  }
}


/* Mobile bottom navigation: downloadable PDF menu. */
@media(max-width:780px){
  .mbn-item{min-width:0;}
  .mbn-label{white-space:nowrap;}
  .mbn-item:hover .mbn-circle img.mbn-download-icon,
  .mbn-item:focus-visible .mbn-circle img.mbn-download-icon,
  .mbn-item:active .mbn-circle img.mbn-download-icon{
    filter:brightness(0) invert(1);
  }
}


/* Mobile menu viewport fix: the fixed navigation must not be constrained by the blurred header. */
@media(max-width:780px){
  

  

  

  

  

  .mbn-label{font-size:10.5px;}
}


/* ===== Mobile menu redesign: glassmorphism, bigger unified items, contact info ===== */




/* ===== Mobile menu v2: logo-only header, compact one-screen overlay ===== */





/* Mobile menu final fixes: footer-style logo + visible reserve button with shared CTA effect. */



/* Mobile overlay final refinements: visible close icon and one-screen layout. */