/* ===== STORY OVERLAY ===== */
#story-overlay{
  position:fixed;inset:0;z-index:9999;
  background:#0a0806;display:flex;align-items:center;justify-content:center;
  transition:opacity 1s ease,visibility 1s ease;
}
#story-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
#story-overlay.dismissed{display:none}

.story-skip{
  position:absolute;top:20px;right:20px;z-index:10;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.5);padding:8px 18px;border-radius:20px;
  font-size:0.8rem;cursor:pointer;transition:all 0.2s;font-family:inherit;
}
.story-skip:hover{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.7)}

.scene{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:2rem;text-align:center;
  opacity:0;transition:opacity 0.8s ease;pointer-events:none;
}
.scene.active{opacity:1;pointer-events:auto}

/* Scene: Title */
.story-title{
  font-family:'Playfair Display',serif;font-size:clamp(2.2rem,8vw,5rem);
  font-weight:900;color:var(--gold);
  text-shadow:0 0 60px rgba(212,165,116,0.4),0 0 120px rgba(212,165,116,0.15);
  animation:titleReveal 2s ease-out forwards;opacity:0;
}
.story-title .sub-title{
  display:block;font-size:clamp(0.7rem,2vw,1rem);color:rgba(255,255,255,0.4);
  font-family:'Inter',sans-serif;font-weight:400;font-style:italic;
  margin-top:0.8rem;letter-spacing:0.05em;
}
@keyframes titleReveal{
  0%{opacity:0;transform:scale(0.7);filter:blur(12px)}
  60%{opacity:1;transform:scale(1.04);filter:blur(0)}
  100%{opacity:1;transform:scale(1)}
}

.story-subtitle{
  font-size:clamp(0.85rem,2.5vw,1.1rem);color:rgba(255,255,255,0.45);
  margin-top:1rem;font-style:italic;
  animation:fadeUp 1s ease-out 0.8s forwards;opacity:0;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Scene: Characters */
.story-char{
  font-size:5rem;margin-bottom:1.5rem;
  animation:charBob 3s ease-in-out infinite;
}
@keyframes charBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.story-narration{
  font-size:clamp(0.95rem,2.8vw,1.25rem);color:rgba(255,255,255,0.8);
  line-height:1.7;max-width:480px;
  animation:fadeUp 0.8s ease-out forwards;opacity:0;
}
.story-narration:nth-child(2){animation-delay:0.3s}
.story-narration:nth-child(3){animation-delay:0.6s}
.story-narration strong{color:var(--gold-bright)}

/* Sausage entrance */
.sausage-enter{animation:rollIn 1.2s cubic-bezier(0.22,1,0.36,1) forwards}
@keyframes rollIn{
  0%{transform:translateX(-250px) rotate(0);opacity:0}
  20%{opacity:1}
  100%{transform:translateX(0) rotate(1080deg);opacity:1}
}

/* Scene: Location */
.story-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;border-radius:12px;font-size:1rem;font-weight:700;
  cursor:pointer;border:none;transition:all 0.25s;font-family:inherit;margin-top:1.5rem;
}
.story-btn-primary{background:var(--gold);color:#1a1210}
.story-btn-primary:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 6px 24px rgba(212,165,116,0.3)}
.story-btn-link{
  background:none;border:none;color:rgba(255,255,255,0.35);
  font-size:0.85rem;margin-top:1rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;font-family:inherit;
}
.story-btn-link:hover{color:rgba(255,255,255,0.55)}

/* Scene: Route */
.route-box{width:100%;max-width:420px;position:relative;margin:0 auto}
.route-svg{width:100%;height:auto}
.route-path-bg{fill:none;stroke:rgba(212,165,116,0.25);stroke-width:3;stroke-dasharray:8 6}
.route-path-line{
  fill:none;stroke:var(--green-light);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset 3.5s cubic-bezier(0.4,0,0.2,1);
}
.route-distance{
  font-size:0.9rem;color:rgba(255,255,255,0.5);margin-top:1.2rem;
  animation:fadeUp 0.6s ease-out 0.5s forwards;opacity:0;
}

/* Scene: Arrival */
.arrival-icon{
  font-size:4.5rem;margin-bottom:1rem;
  animation:popIn 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes popIn{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(0)}}

/* Ambient particles */
.story-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particle{
  position:absolute;width:3px;height:3px;background:var(--gold);border-radius:50%;
  opacity:0;animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{opacity:0;transform:translateY(100vh) scale(0)}
  10%{opacity:0.6}
  90%{opacity:0.6}
  100%{opacity:0;transform:translateY(-10vh) scale(1)}
}

/* ===== HOMEPAGE (existing) ===== */
.splash{
  background:linear-gradient(160deg,var(--brown-dark) 0%,var(--brown) 50%,var(--brown-light) 100%);
  color:white;padding:3rem 1.5rem 2rem;text-align:center;
  position:relative;overflow:hidden;
}
.splash::before{content:'🌭';font-size:8rem;position:absolute;top:-20px;right:-10px;
  opacity:0.08;transform:rotate(15deg);pointer-events:none}
.splash-badge{display:inline-block;background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);
  padding:4px 14px;border-radius:20px;font-size:0.75rem;font-weight:600;
  letter-spacing:0.05em;text-transform:uppercase;margin-bottom:1rem}
.sausage-float{font-size:4.5rem;margin-bottom:1rem;
  animation:float 3s ease-in-out infinite;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.4))}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.splash h1{font-family:'Playfair Display',serif;font-size:clamp(2.2rem,6vw,3.2rem);
  font-weight:900;line-height:1.1;margin-bottom:0.3rem}
.splash h1 .ts{color:var(--brown-light)}
.splash .sub{font-size:clamp(0.85rem,2.5vw,1.05rem);opacity:0.85;margin-bottom:1.2rem}
.splash-price{display:inline-flex;align-items:baseline;gap:6px;
  background:rgba(0,0,0,0.2);border-radius:var(--radius-sm);padding:8px 20px;margin-bottom:1rem}
.splash-price .from{font-size:0.9rem;opacity:0.7}
.splash-price .amount{font-family:'Playfair Display',serif;font-size:2.8rem;font-weight:900;color:#66BB6A}
.splash-tagline{font-style:italic;opacity:0.65;font-size:0.9rem;margin-bottom:1.2rem}
.splash-location{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:0.8rem;opacity:0.6;margin-bottom:1.5rem}
.splash-info{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;margin-bottom:1.5rem}
.pill{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);border-radius:100px;padding:5px 12px;
  font-size:0.75rem;color:rgba(255,255,255,0.65)}
.pill .icon{font-size:0.85rem}
.status{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
  border-radius:100px;font-size:0.75rem;font-weight:600;margin-bottom:1.2rem}
.status-open{background:rgba(46,125,50,0.15);color:#66BB6A;border:1px solid rgba(46,125,50,0.2)}
.status-closed{background:rgba(198,40,40,0.15);color:#EF5350;border:1px solid rgba(198,40,40,0.2)}
.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.status-open .status-dot{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.splash-ctas{display:flex;flex-direction:column;gap:0.7rem;width:100%;max-width:320px;margin:0 auto}
.cta{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:14px;font-size:1rem;font-weight:700;
  text-decoration:none;transition:all 0.25s ease;cursor:pointer;border:none}
.cta-primary{background:var(--green);color:#fff;box-shadow:0 4px 20px rgba(46,125,50,0.35)}
.cta-primary:hover{background:#388E3C;transform:translateY(-2px);box-shadow:0 6px 28px rgba(46,125,50,0.45)}
.cta-secondary{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.9);
  border:1px solid rgba(255,255,255,0.15)}
.cta-secondary:hover{background:rgba(255,255,255,0.15);transform:translateY(-1px)}
.splash-hours{margin-top:1.5rem;padding:0.8rem 1.2rem;
  background:rgba(255,255,255,0.05);border-radius:10px;
  font-size:0.78rem;color:rgba(255,255,255,0.4);line-height:1.8}
.splash-hours strong{color:rgba(255,255,255,0.55)}
.section-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:900;
  color:var(--brown-dark);text-align:center;padding:1.5rem 0 0.5rem}

.extra-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--radius);margin:0.5rem 0 1rem;
  background:var(--brown);color:white;text-decoration:none;
  font-weight:700;font-size:0.95rem;
  box-shadow:0 4px 16px rgba(93,64,55,0.3);transition:all 0.25s ease;
}
.extra-link:hover{background:var(--brown-dark);transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(93,64,55,0.4)}

/* ===== ORDER / CART ===== */
.menu-item{position:relative;}
.menu-price{margin-left:auto;} /* Push price to the right, but keep it in flow */
.qty-controls{
  display:flex;align-items:center;gap:0;opacity:0;transition:opacity 0.2s;
  margin-left:8px;
}
.menu-tile:hover .qty-controls,.qty-controls.has-items{opacity:1}
.qty-btn{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--brown);
  background:var(--white);color:var(--brown);font-size:1rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;flex-shrink:0;line-height:1}
.qty-btn:hover{background:var(--brown);color:white}
.qty-btn:active{transform:scale(0.9)}
.qty-count{min-width:28px;text-align:center;font-weight:900;font-size:0.95rem;
  color:var(--brown)}

/* MODAL / CART BAR */
.cart-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:var(--brown-dark);color:white;
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
  transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 -4px 24px rgba(0,0,0,0.25);cursor:pointer;}
.cart-bar.visible{transform:translateY(0)}
.cart-info{display:flex;flex-direction:column;gap:2px}
.cart-count{font-size:0.8rem;opacity:0.7}
.cart-total{font-size:1.2rem;font-weight:900}
.cart-total .eur{font-family:'Playfair Display',serif}
.cart-wa{display:flex;align-items:center;gap:8px;padding:10px 20px;
  border-radius:12px;background:var(--green);color:white;font-weight:700;
  font-size:0.9rem;text-decoration:none;border:none;cursor:pointer;
  transition:all 0.2s}
.cart-wa:hover{background:#388E3C;transform:translateY(-1px)}
.cart-wa:disabled{opacity:0.4;cursor:default;transform:none}

/* CART MODAL */
.cart-modal-backdrop {
  position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6);
  z-index:999; display:none; align-items:center; justify-content:center;
  padding:1rem; backdrop-filter:blur(4px);
}
.cart-modal-backdrop.open { display:flex; }
.cart-modal {
  background:white; border-radius:var(--radius); width:100%; max-width:400px;
  max-height:80vh; display:flex; flex-direction:column; box-shadow:0 10px 40px rgba(0,0,0,0.2);
  overflow:hidden;
}
.cart-modal-header {
  padding:1rem 1.5rem; background:var(--brown-dark); color:white;
  display:flex; justify-content:space-between; align-items:center;
}
.cart-modal-title { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:900; }
.cart-modal-close { background:none; border:none; color:white; font-size:1.5rem; cursor:pointer; }
.cart-modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
.cart-modal-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #eee; }
.cart-modal-item-name { font-weight:700; font-size:0.9rem; flex:1; }
.cart-modal-item-price { font-weight:900; color:var(--brown); width:60px; text-align:right; }
.cart-modal-footer { padding:1.5rem; background:var(--bg); border-top:1px solid #eee; }

/* ===== IMPRESSUM ===== */
.impressum{background:var(--cream);border-top:1px solid var(--cream-dark);
  padding:1.5rem;margin-top:1rem;border-radius:var(--radius)}
.impressum-title{font-weight:900;font-size:1rem;color:var(--brown-dark);
  margin-bottom:0.6rem}
.impressum p,.impressum div{font-size:0.75rem;line-height:1.7;color:var(--text-light)}
.impressum strong{color:var(--text)}

/* ===== MOBILE ===== */
@media(max-width:640px){
  .splash{padding:2.5rem 1.2rem 1.5rem}
  .splash h1{font-size:1.9rem}
  .splash-price .amount{font-size:2.2rem}
  .sausage-float{font-size:3.5rem}
  .qty-controls{opacity:1}
  .qty-btn{width:26px;height:26px;font-size:0.85rem}
  .qty-count{min-width:22px;font-size:0.85rem}
  .cart-bar{padding:10px 12px}
  .story-char{font-size:4rem}
  .story-skip{top:12px;right:12px;padding:6px 14px;font-size:0.75rem}
  .route-box{max-width:320px}
}
@media(prefers-reduced-motion:reduce){
  *,.scene,.story-title,.story-subtitle,.story-narration,.story-char,
  .sausage-enter,.arrival-icon,.route-path-line,.particle{
    animation:none!important;transition:none!important;
    opacity:1!important;transform:none!important;filter:none!important;
  }
}