html{ scroll-behavior: smooth; }

.animated-item {
    position: fixed;
    height: 100px;
    z-index: 2147483647;
    pointer-events: none;
}


.logo {
  max-height: 120px;
  width: auto;
}



/* === Badge: Sany Bagy Kebab === */
.badge-new-item{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display:block;
  max-width: 220px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  border-radius: 10px;
  overflow: hidden;
}
.badge-new-item img{
  display:block;
  width:100%;
  height:auto;
}
@media (max-width: 640px){
  .badge-new-item{ max-width: 160px; top:8px; right:8px; }
}
/* === Menu line wrapping/a11y fixes === */
.menu-line{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}
.menu-name, .menu-price{
  white-space: normal;
  word-break: normal;
}
.menu-name{
  display:inline-block;
}
.menu-price{
  display:inline-block;
  text-align:right;
  flex: 0 0 auto;
}
/* Prevent per-letter wrapping issue */
.menu-name, .menu-desc{
  letter-spacing: normal;
}

.has-badge{ position:relative; }

.hero-has-badge{ position: relative; }

.menu-note{
  font-size: 0.85em;
  font-style: italic;
  color: #444;
  margin: 4px 0 10px 0;
}


/* === Badge bouncing setup === */
.hero-has-badge{ position: relative; overflow: hidden; }
.badge-new-item{
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
}
/* Optional: avoid blocking interactions behind badge */
@media (hover:hover){
  .badge-new-item{ pointer-events: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .badge-new-item{ transition: none !important; animation: none !important; }
}

@media (hover:hover){ .badge-new-item{ pointer-events:none; } }


.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}
.site-header .site-logo{
  display:block;
  height:auto;
  max-height: 64px;
}
.header-phone{
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  transform: translateY(2px);
}
@media (max-width: 640px){
  .header-phone{ font-size: 24px; }
  .site-header .site-logo{ max-height: 52px; }
}


/* Anchor target for phone numbers: avoid being hidden under sticky/overlapping elements */
#telefon{
  display:block;
  scroll-margin-top: 30vh; /* fallback if native anchor scroll is used */
}


/* === Whole-word wrapping for menu texts === */
.menu-name, .menu-desc, .menu-price, .menu-tag{
  white-space: normal;
  word-break: keep-all;     /* don't break inside words */
  overflow-wrap: break-word;/* if needed, break long tokens at safe points */
  hyphens: none;            /* disable auto hyphenation */
  letter-spacing: normal;
}

.no-wrap{ white-space: nowrap; }
.menu-line{ display:flex; align-items: baseline; justify-content: space-between; gap:10px; }
.menu-name{ flex:1 1 auto; min-width:0; } 
.menu-price{ flex:0 0 auto; }

.menu-name .menu-tag{
  font-size: 0.85em;
  opacity: 0.65;
  margin-left: 6px;
}
.menu-desc .menu-tag{
  font-size: 0.85em;
  opacity: 0.65;
}


/* Header phone icon image */
.header-phone{
  display:inline-flex;
  align-items:center;
}
.header-phone img{
  display:block;
  height: 28px;
  width: auto;
}
@media (max-width: 640px){
  .header-phone img{ height: 24px; }
}


/* === Header phone icon: bigger + interactive wiggle === */
.header-phone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.header-phone img{
  display:block;
  height: 38px;
  width: auto;
  transform-origin: 20% 80%;
  transition: transform 160ms ease;
}
@media (max-width: 640px){
  .header-phone img{ height: 30px; }
}
/* Hover/focus wiggle */
@keyframes phone-wiggle{
  0%   { transform: rotate(0deg) scale(1); }
  12%  { transform: rotate(12deg) scale(1.06); }
  24%  { transform: rotate(-12deg) scale(1.06); }
  36%  { transform: rotate(10deg) scale(1.05); }
  48%  { transform: rotate(-10deg) scale(1.05); }
  60%  { transform: rotate(7deg) scale(1.04); }
  72%  { transform: rotate(-7deg) scale(1.04); }
  84%  { transform: rotate(4deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1.0); }
}
.header-phone:hover img,
.header-phone:focus-visible img{
  animation: phone-wiggle 800ms ease-in-out both;
}
/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .header-phone img{ transition:none; }
  .header-phone:hover img,
  .header-phone:focus-visible img{ animation:none; }
}


/* Override: bigger header phone icon */
.header-phone img{ height: 44px; }
@media (max-width: 640px){
  .header-phone img{ height: 36px; }
}



/* === Anchor offset for sticky header + quicklinks === */
:root{ --anchor-offset: 140px; } /* fallback */
h2[id], h3[id]{ scroll-margin-top: var(--anchor-offset); }



/* === Mobile menu layout cleanup === */
/* Keep words intact, avoid hyphenation globally in menu */
.menu-name, .menu-desc, .menu-tag{
  word-break: keep-all;
  hyphens: none;
  letter-spacing: normal;
}

/* Base: two-column layout name | price with flexible gap */
.menu-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
}
.menu-name{ flex: 1 1 auto; min-width: 0; display: block; }
.menu-price{ flex: 0 0 auto; white-space: nowrap; }

/* Remove any dotted leader pseudo-elements if they exist */
.menu-line::after{ content: none !important; }

/* Soften separators: only one subtle divider between items */
.menu-item{ border: 0 !important; }
.menu-item + .menu-item{ border-top: 1px solid rgba(0,0,0,.08); }

/* Tighter mobile layout; ensure price stays right and name uses available width */
@media (max-width: 640px){
  .menu-line{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 6px 10px;
  }
  .menu-name{ min-width: 0; }
  .menu-price{ justify-self: end; white-space: nowrap; }
  .menu-item + .menu-item{ border-top: 1px solid rgba(0,0,0,.1); }
}


/* === Mobile menu tuning (Galaxy S24 ~412px) === */
@media (max-width: 430px){
  .menu-line{
    display: grid;
    grid-template-columns: 1fr auto; /* name takes all free space, price fits content */
    align-items: baseline;
    gap: 6px 8px;
  }
  .menu-name{
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .menu-price{
    justify-self: end;
    white-space: nowrap;
    font-size: 0.95rem;
  }
  .menu-name .menu-tag{
    font-size: 0.8em;
    opacity: 0.6;
    margin-left: 4px;
  }
  .menu-item{ padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 380px){
  .menu-name{ font-size: 0.9rem; }
  .menu-price{ font-size: 0.9rem; }
}


/* Static Stoerer over hero (v1.2.4) */
figure.hero-banner, .hero-banner{ position: relative; }
.static-stoerer{ position:absolute; top:18px; right:18px; display:block; z-index:60; }
.static-stoerer img{ display:block; height:min(120px,24vw); width:auto; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.35); }
@media (max-width:640px){ .static-stoerer{ top:12px; right:12px; } .static-stoerer img{ height:min(88px,28vw); } }
.stoerer-modal{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:1000; }
.stoerer-modal[aria-hidden="false"]{ display:flex; }
.stoerer-modal__content{ position:relative; max-width:92vw; max-height:92vh; }
.stoerer-modal__content img{ display:block; max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.stoerer-modal__close{ position:absolute; top:-14px; right:-14px; width:36px; height:36px; border-radius:50%; border:none; background:#fff; font-size:26px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.stoerer-modal__close:hover{ filter:brightness(.95); }

/* Promo image under Speisekarte */
.promo-card{ margin: 14px 0 14px; }
.promo-card img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
@media (max-width: 640px){
  .promo-card{ margin: 10px 0 10px; }
}


/* Subtile SEO-About-Section */
.about-seo{ margin:22px 0 26px; font-size:.98em; line-height:1.55; }
.about-seo h2{ font-size:1.25em; margin:0 0 8px; }
.about-seo p{ margin:0 0 10px; }
@media (max-width:640px){ .about-seo{ font-size:.97em; } }