@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/roboto.woff2')}@font-face{font-family:Oswald;font-style:normal;font-weight:200 700;font-display:swap;src:url('/assets/oswald.woff2')}html{scroll-behavior:smooth}a:focus-visible,button:focus-visible{outline:3px solid #f20d21;outline-offset:4px}.brand-hero{width:min(720px,90vw);height:auto;display:block;margin:auto}.mobile-nav{display:none;padding:12px 16px}.mobile-nav.open{display:flex;flex-direction:column;gap:16px}.category-label{text-shadow:0 1px 5px #000}.skip{position:absolute;top:-100px}.skip:focus{top:8px;z-index:100;background:#141414;padding:12px}@media(min-width:768px){.mobile-nav.open{display:none}}@media(max-width:767px){.brand-hero{max-width:480px}.ribbon-items{font-size:12px;letter-spacing:.04em;gap:8px}.ribbon-items span{white-space:nowrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Match the original site's one-second entrances and subtle card hover. */
.motion-enter{transition:opacity 1s cubic-bezier(0,0,.2,1),transform 1s cubic-bezier(0,0,.2,1)}
.motion-pending{opacity:0;transform:translate(var(--enter-x,0),var(--enter-y,0))}
.motion-visible{opacity:1;transform:none}
#menu .grid a.group{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}
#menu .grid a.group img{transition:opacity .15s cubic-bezier(.4,0,.2,1)}
@media(hover:hover){#menu .grid a.group:hover{transform:scale(1.02);box-shadow:0 25px 50px -12px rgb(0 0 0/.25)}#menu .grid a.group:hover img{opacity:.9}}
#menu .grid a.group:focus-visible{transform:scale(1.02)}
#main{overflow:clip}
@media(prefers-reduced-motion:reduce){.motion-enter,.motion-pending,.motion-visible{opacity:1;transform:none;transition:none}#menu .grid a.group:hover,#menu .grid a.group:focus-visible{transform:none}}

.menu-image-card{position:relative;display:block;cursor:pointer;transition:transform .3s,box-shadow .3s}
.menu-image-card>img{display:block;transition:opacity .15s}
.menu-image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;background:rgb(20 20 20/.2);backdrop-filter:blur(4px);transition:opacity .3s}
@media(hover:hover){.menu-image-card:hover{transform:scale(1.02);box-shadow:0 25px 50px -12px rgb(0 0 0/.25)}.menu-image-card:hover>img{opacity:.9}.menu-image-card:hover .menu-image-overlay{opacity:1}}
.menu-image-card:focus-visible .menu-image-overlay{opacity:1}
@media(hover:none),(max-width:767px){.menu-image-overlay{display:none}}
@media(prefers-reduced-motion:reduce){.menu-image-card,.menu-image-card>img,.menu-image-overlay{transition:none}.menu-image-card:hover{transform:none}}

/* Contact links show the same interactive cue throughout the website. */
a[href^="tel:"],a[href*="google.com/maps"]{transition:color .2s ease}
a[href^="tel:"]:hover,a[href^="tel:"]:focus-visible,a[href*="google.com/maps"]:hover,a[href*="google.com/maps"]:focus-visible{color:#e52d35}
.text-primary a[href^="tel:"]:hover,.text-primary a[href^="tel:"]:focus-visible{color:#ff747b}
@media(prefers-reduced-motion:reduce){a[href^="tel:"],a[href*="google.com/maps"]{transition:none}}

a[href^="mailto:"]{transition:color .2s ease}a[href^="mailto:"]:hover,a[href^="mailto:"]:focus-visible{color:#e52d35}@media(prefers-reduced-motion:reduce){a[href^="mailto:"]{transition:none}}

/* Quiet charcoal food illustrations, drawn for the Snackbar website. */
body>.min-h-screen{background-color:#161616;background-image:url('/assets/snackbar-pattern.svg?v=3');background-repeat:repeat;background-size:900px 700px}
#main>section.bg-background,footer.bg-background{background-color:transparent}
@media(max-width:767px){body>.min-h-screen{background-size:675px 525px}}

/* Keep the original artwork, with an independent gap above its tagline. */
.brand-separated{display:flex;flex-direction:column;gap:16px}.brand-logo-crop,.brand-tagline-crop{display:block;position:relative;overflow:hidden;width:100%}.brand-logo-crop{aspect-ratio:1436/460}.brand-tagline-crop{aspect-ratio:1436/104}.brand-separated img{position:absolute;left:0;width:100%;max-width:none;height:auto}.brand-logo-crop img{top:0}.brand-tagline-crop img{bottom:0}

.news-section{max-width:1100px;margin:0 auto;padding:48px 24px 72px;width:100%}.news-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}.news-card{display:block;border:2px solid #a82828;border-radius:16px;overflow:hidden;background:#141414;transition:transform .3s}.news-card img{display:block;width:100%;height:auto}.news-status{text-align:center;max-width:600px;margin:36px auto;line-height:1.7;color:#eee}@media(hover:hover){.news-card:hover{transform:scale(1.015)}}@media(max-width:767px){.news-gallery{grid-template-columns:1fr;gap:24px}.news-section{padding:32px 16px 48px}}@media(min-width:768px) and (max-width:1100px){header nav[aria-label="Hauptnavigation"]{gap:12px;font-size:14px}header a[aria-label="Zur Spezialitäten Snackbar"]>div{width:180px}}@media(prefers-reduced-motion:reduce){.news-card{transition:none}.news-card:hover{transform:none}}

/* Center incomplete desktop news rows while preserving card sizes and mobile layout. */
@media(min-width:768px){
  #news-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  #news-gallery>.news-card{grid-column:span 2}
  #news-gallery>.news-card:last-child:nth-child(odd){grid-column:2 / span 2}
}


/* News and Impressum headings match the existing opening-hours cards. */
#main .bubble-banner{background:transparent;padding:36px 24px 42px}
#main .bubble-banner .bubble-board{background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .1);border-radius:24px;padding:42px 24px;text-align:center;margin:0 auto;max-width:1100px;width:100%;color:#fff}
#main .bubble-symbol{display:flex;justify-content:center;color:#e32e2b;margin-bottom:16px}
#main .bubble-symbol svg{width:28px;height:28px}
#main .bubble-banner h1{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:clamp(36px,6vw,54px);line-height:1.15;font-weight:700;text-transform:uppercase;margin:0 0 16px;color:#fff;overflow-wrap:anywhere}
#main .bubble-banner .bubble-subtitle{font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:clamp(19px,3vw,24px);line-height:1.45;font-weight:500;color:#e73530;margin:0}
header nav a[aria-current],.mobile-nav a[aria-current]{text-decoration-line:underline;text-decoration-color:#de3430;text-decoration-thickness:3px;text-underline-offset:8px;text-decoration-skip-ink:none}
@media(max-width:520px){#main .bubble-banner{padding:24px 16px 30px}#main .bubble-banner .bubble-board{padding:32px 18px}}

/* Approved smoked-glass category ribbon, 2026-09-15. Preserve original box geometry. */
#main > div:has(> .container > .ribbon-items) {
  background: linear-gradient(180deg, rgba(106,70,77,.27), rgba(35,31,33,.68) 42%, rgba(38,30,32,.72));
  border-color: transparent;
  background-clip: border-box;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(177,112,122,.6), inset 0 -1px 0 rgba(155,87,98,.55), inset 0 2px 8px rgba(255,255,255,.035);
}
#main .ribbon-items { color: #fff; }
#main .ribbon-items > span:nth-child(even) { color: #b57880; }

/* Enlarge only the desktop hero logo by 15%; reserve its space in normal flow. */
@media (min-width:768px) {
  #main .brand-hero {
    width: min(828px, calc(100vw / 1.15 - 48px));
    height: calc(min(828px, calc(100vw / 1.15 - 48px)) * 564 / 1436 + 18.4px) !important;
  }
}

/* Approved mobile menu button, variant 2. */
.mobile-menu-open{display:none}
@media(max-width:767px){
 #menu a.group > .relative::after{content:none}
 .mobile-menu-open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center;gap:16px;min-width:184px;padding:8px 9px 8px 25px;border:2px solid #ffffff;border-radius:999px;background:#df1725;color:#fff;box-shadow:0 4px 14px #0008;font:700 24px Oswald,Arial,sans-serif;letter-spacing:1.3px;white-space:nowrap;pointer-events:none}
 .mobile-menu-open .arrow-circle{display:flex;align-items:center;justify-content:center;background:#fff;color:#d91524;width:42px;height:42px;border-radius:50%;flex-shrink:0}
 .mobile-menu-open svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
}