```json { "files": { "index.html": "\n\n\n \n \n \n Chobab Korean & Japanese | Sushi Restaurant Stuttgart\n \n\n\n \n
\n \n
\n\n \n
\n
\n
\n
\n

\n Willkommen bei\n Chobab Korean & Japanese\n

\n

Authentische koreanische und japanische Küche im Herzen von Stuttgart

\n
\n Speisekarte entdecken\n Jetzt reservieren\n
\n
\n
\n
\n \n
\n
\n\n \n
\n
\n
\n
\n
🍱
\n

Frische Zutaten

\n

Täglich frisch zubereitete Spezialitäten mit hochwertigen Zutaten

\n
\n
\n
👨‍🍳
\n

Meisterhafte Küche

\n

Erfahrene Köche vereinen koreanische und japanische Traditionen

\n
\n
\n
🏮
\n

Authentisches Ambiente

\n

Genießen Sie ein einzigartiges kulinarisches Erlebnis

\n
\n
\n
\n
\n\n \n
\n
\n
\n

Unsere Spezialitäten

\n

Eine Auswahl unserer beliebtesten Gerichte

\n
\n
\n
\n

Sushi & Sashimi

\n
\n
\n
\n

Nigiri Set

\n €18,90\n
\n

8 Stück handgefertigte Nigiri mit frischem Fisch

\n
\n
\n
\n

Maki Selection

\n €16,50\n
\n

Gemischte Auswahl unserer beliebtesten Maki-Rollen

\n
\n
\n
\n

Sashimi Deluxe

\n €24,90\n
\n

Feinste Filetschnitte vom Thunfisch, Lachs und Hamachi

\n
\n
\n
\n
\n

Koreanische Klassiker

\n
\n
\n
\n

Bibimbap

\n €14,90\n
\n

Reis mit buntem Gemüse, Rindfleisch und Spiegelei

\n
\n
\n
\n

Bulgogi

\n €17,50\n
\n

Mariniertes Rindfleisch in süß-würziger Soße

\n
\n
\n
\n

Kimchi Jjigae

\n €13,90\n
\n

Traditioneller Kimchi-Eintopf mit Schweinefleisch

\n
\n
\n
\n
\n

Warme Gerichte

\n
\n
\n
\n

Ramen

\n €12,90\n
\n

Japanische Nudelsuppe mit Chashu, Ei und Gemüse

\n
\n
\n
\n

Yakitori

\n €11,50\n
\n

Gegrillte Hähnchen-Spieße mit Teriyaki-Glasur

\n
\n
\n
\n

Tempura

\n €15,90\n
\n

Knusprig frittierte Garnelen und Gemüse

\n
\n
\n
\n
\n
\n

Alle Preise verstehen sich inklusive gesetzlicher Mehrwertsteuer. Allergene und Zusatzstoffe auf Anfrage.

\n
\n
\n
\n\n \n
\n
\n
\n
\n

Über Chobab

\n

Willkommen im Chobab Korean & Japanese – Ihrem Sushi Restaurant im Herzen von Stuttgart. Wir verbinden die besten Traditionen der koreanischen und japanischen Küche zu einem einzigartigen kulinarischen Erlebnis.

\n

Unser erfahrenes Küchenteam verwendet ausschließlich frische, hochwertige Zutaten und bereitet jedes Gericht mit Leidenschaft und Sorgfalt zu. Von klassischen Sushi-Variationen bis hin zu authentischen koreanischen Spezialitäten – bei uns finden Sie eine vielfältige Auswahl.

\n

Lassen Sie sich in unserem stilvollen Ambiente verwöhnen und genießen Sie die Harmonie von Geschmack, Qualität und Service.

\n
\n
\n Öffnungszeiten:\n

Di-So: 12:00 - 22:00 Uhr
Montag Ruhetag

\n
\n
\n Standort:\n

Im Herzen von Stuttgart
Zentral gelegen

\n
\n
\n
\n
\n
\n 🍣\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n

Kontaktieren Sie uns

\n

Wir freuen uns auf Ihre Reservierung oder Anfrage

\n
\n
\n
\n
📞
\n

Telefon

\n +49 711 45143474\n

Rufen Sie uns an für Reservierungen

\n
\n
\n
✉️
\n

E-Mail

\n info@chobab.de\n

Schreiben Sie uns Ihre Anfragen

\n
\n
\n
🌐
\n

Website

\n chobab.de\n

Besuchen Sie unsere vollständige Website

\n
\n
\n
\n

Reservieren Sie jetzt Ihren Tisch

\n

Erleben Sie authentische koreanische und japanische Küche in Stuttgart

\n Jetzt Tisch reservieren\n
\n
\n
\n\n \n \n\n \n\n", "assets/style.css": "/* ===== CSS Reset & Base Styles ===== */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n:root {\n --primary-color: #d4282f;\n --secondary-color: #8b1f24;\n --accent-color: #f4a261;\n --dark-bg: #1a1a1a;\n --light-bg: #f8f5f2;\n --text-dark: #2d2d2d;\n --text-light: #ffffff;\n --text-muted: #666666;\n --border-color: #e0e0e0;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);\n --transition: all 0.3s ease;\n}\n\nhtml {\n scroll-behavior: smooth;\n font-size: 16px;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-dark);\n background-color: var(--light-bg);\n overflow-x: hidden;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n/* ===== Typography ===== */\nh1, h2, h3, h4, h5, h6 {\n line-height: 1.2;\n font-weight: 700;\n color: var(--text-dark);\n}\n\nh1 { font-size: 2.5rem; }\nh2 { font-size: 2rem; }\nh3 { font-size: 1.5rem; }\nh4 { font-size: 1.25rem; }\n\na {\n text-decoration: none;\n color: inherit;\n transition: var(--transition);\n}\n\nimg {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\n/* ===== Header & Navigation ===== */\n.header {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n background-color: rgba(26, 26, 26, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: var(--shadow);\n}\n\n.nav {\n padding: 1rem 0;\n}\n\n.nav-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--primary-color);\n letter-spacing: 1px;\n}\n\n.nav-menu {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-menu a {\n color: var(--text-light);\n font-weight: 500;\n padding: 0.5rem 0;\n position: relative;\n}\n\n.nav-menu a::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background-color: var(--primary-color);\n transition: var(--transition);\n}\n\n.nav-menu a:hover::after {\n width: 100%;\n}\n\n.nav-toggle {\n display: none;\n flex-direction: column;\n gap: 4px;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n\n.nav-toggle span {\n width: 25px;\n height: 3px;\n background-color: var(--text-light);\n border-radius: 3px;\n transition: var(--transition);\n}\n\n/* ===== Hero Section ===== */\n.hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);\n overflow: hidden;\n margin-top: 60px;\n}\n\n.hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: \n repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(212, 40, 47, 0.03) 10px, rgba(212, 40, 47, 0.03) 20px),\n repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(244, 162, 97, 0.03) 10px, rgba(244, 162, 97, 0.03) 20px);\n opacity: 0.5;\n}\n\n.hero-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(circle at 30% 50%, rgba(212, 40, 47, 0.1), transparent 50%),\n radial-gradient(circle at 70% 50%, rgba(244, 162, 97, 0.1), transparent 50%);\n}\n\n.hero-content {\n position: relative;\n z-index: 2;\n text-align: center;\n color: var(--text-light);\n max-width: 800px;\n padding: 2rem;\n}\n\n.hero-subtitle {\n display: block;\n font-size: 1.2rem;\n font-weight: 400;\n color: var(--accent-color);\n margin-bottom: 1rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n}\n\n.hero-title {\n font-size: 3.5rem;\n margin-bottom: 1.5rem;\n background: linear-gradient(135deg, #ffffff 0%, var(--accent-color) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.hero-description {\n font-size: 1.3rem;\n margin-bottom: 2.5rem;\n color: rgba(255, 255, 255, 0.9);\n line-height: 1.8;\n}\n\n.hero-buttons {\n display: flex;\n gap: 1.5rem;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.btn {\n display: inline-block;\n padding: 1rem 2.5rem;\n border-radius: 50px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: var(--transition);\n cursor: pointer;\n border: 2px solid transparent;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: var(--text-light);\n box-shadow: 0 4px 15px rgba(212, 40, 47, 0.3);\n}\n\n.btn-primary:hover {\n background-color: var(--secondary-color);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(212, 40, 47, 0.4);\n}\n\n.btn-secondary {\n background-color: transparent;\n color: var(--text-light);\n border-color: var(--text-light);\n}\n\n.btn-secondary:hover {\n background-color: var(--text-light);\n color: var(--dark-bg);\n}\n\n.btn-large {\n padding: 1.2rem 3rem;\n font-size: 1.1rem;\n}\n\n.scroll-indicator {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2;\n}\n\n.scroll-indicator span {\n display: block;\n width: 30px;\n height: 50px;\n border: 2px solid rgba(255, 255, 255, 0.5);\n border-radius: 25px;\n position: relative;\n}\n\n.scroll-indicator span::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 6px;\n height: 6px;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n animation: scroll 2s infinite;\n}\n\n@keyframes scroll {\n 0% { transform: translate(-50%, 0); opacity: 0; }\n 50% { opacity: 1; }\n 100% { transform: translate(-50%, 20px); opacity: 0; }\n}\n\n/* ===== Features Section ===== */\n.features {\n padding: 5rem 0;\n background-color: var(--light-bg);\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2.5rem;\n}\n\n.feature-card {\n background-color: #ffffff;\n padding: 2.5rem 2rem;\n border-radius: 15px;\n text-align: center;\n box-shadow: var(--shadow);\n transition: var(--transition);\n border: 1px solid var(--border-color);\n}\n\n.feature-card:hover {\n transform: translateY(-10px);\n box-shadow: var(--shadow-lg);\n border-color: var(--primary-color);\n}\n\n.feature-icon {\n font-size: 3.5rem;\n margin-bottom: 1.5rem;\n filter: grayscale(20%);\n}\n\n.feature-card h3 {\n margin-bottom: 1rem;\n color: var(--text-dark);\n}\n\n.feature-card p {\n color: var(--text-muted);\n line-height: 1.8;\n}\n\n/* ===== Section Headers ===== */\n.section-header {\n text-align: center;\n margin-bottom: 4rem;\n}\n\n.section-title {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n position: relative;\n display: inline-block;\n}\n\n.section-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 4px;\n background: linear-gradient(90deg, var(--primary-color), var(--accent-color));\n border-radius: 2px;\n}\n\n.section-subtitle {\n font-size: 1.1rem;\n color: var(--text-muted);\n margin-top: 1.5rem;\n}\n\n/* ===== Menu Section ===== */\n.menu {\n padding: 6rem 0;\n background-color: #ffffff;\n}\n\n.menu-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 3rem;\n margin-bottom: 3rem;\n}\n\n.menu-category {\n background-color: var(--light-bg);\n padding: 2.5rem;\n border-radius: 15px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n}\n\n.menu-category:hover {\n box-shadow: var(--shadow-lg);\n}\n\n.category-title {\n color: var(--primary-color);\n margin-bottom: 2rem;\n padding-bottom: 1rem;\n border-bottom: 2px solid var(--border-color);\n font-size: 1.8rem;\n}\n\n.menu-items {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.menu-item {\n padding-bottom: 1.5rem;\n border-bottom: 1px solid var(--border-color);\n}\n\n.menu-item:last-child {\n border-bottom: none;\n padding-bottom: 0;\n}\n\n.item-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 0.5rem;\n gap: 1rem;\n}\n\n.item-header h4 {\n color: var(--text-dark);\n font-size: 1.1rem;\n}\n\n.item-price {\n color: var(--primary-color);\n font-weight: 700;\n font-size: 1.1rem;\n white-space: nowrap;\n}\n\n.menu-item p {\n color: var(--text-muted);\n font-size: 0.95rem;\n line-height: 1.6;\n}\n\n.menu-note {\n text-align: center;\n margin-top: 3rem;\n padding: 1.5rem;\n background-color: var(--light-bg);\n border-radius: 10px;\n border-left: 4px solid var(--primary-color);\n}\n\n.menu-note p {\n color: var(--text-muted);\n font-size: 0.9rem;\n}\n\n/* ===== About Section ===== */\n.about {\n padding: 6rem 0;\n background: linear-gradient(135deg, var(--light-bg) 0%, #ffffff 100%);\n}\n\n.about-content {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: center;\n}\n\n.about-text h2 {\n margin-bottom: 2rem;\n}\n\n.about-text p {\n margin-bottom: 1.5rem;\n color: var(--text-muted);\n line-height: 1.8;\n font-size: 1.05rem;\n}\n\n.about-features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin-top: 2.5rem;\n}\n\n.about-feature {\n background-color: #ffffff;\n padding: 1.5rem;\n border-radius: 10px;\n box-shadow: var(--shadow);\n border-left: 4px solid var(--primary-color);\n}\n\n.about-feature strong {\n display: block;\n color: var(--primary-color);\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n}\n\n.about-feature p {\n margin-bottom: 0;\n font-size: 0.95rem;\n}\n\n.about-image {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.image-placeholder {\n width: 100%;\n max-width: 400px;\n aspect-ratio: 1;\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8rem;\n box-shadow: var(--shadow-lg);\n position: relative;\n overflow: hidden;\n}\n\n.image-placeholder::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 20px,\n rgba(255, 255, 255, 0.05) 20px,\n rgba(255, 255, 255, 0.05) 40px\n );\n}\n\n.image-placeholder span {\n position: relative;\n z-index: 1;\n}\n\n/* ===== Contact Section ===== */\n.contact {\n padding: 6rem 0;\n background-color: #ffffff;\n}\n\n.contact-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2.5rem;\n margin-bottom: 4rem;\n}\n\n.contact-card {\n background-color: var(--light-bg);\n padding: 2.5rem 2rem;\n border-radius: 15px;\n text-align: center;\n box-shadow: var(--shadow);\n transition: var(--transition);\n border: 2px solid transparent;\n}\n\n.contact-card:hover {\n transform: translateY(-5px);\n box-shadow: var(--shadow-lg);\n border-color: var(--primary-color);\n}\n\n.contact-icon {\n font-size: 3rem;\n margin-bottom: 1.5rem;\n}\n\n.contact-card h3 {\n margin-bottom: 1rem;\n color: var(--text-dark);\n}\n\n.contact-link {\n display: block;\n color: var(--primary-color);\n font-weight: 600;\n font-size: 1.2rem;\n margin-bottom: 0.5rem;\n}\n\n.contact-link:hover {\n color: var(--secondary-color);\n text-decoration: underline;\n}\n\n.contact-card p {\n color: var(--text-muted);\n font-size: 0.95rem;\n}\n\n.cta-section {\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);\n padding: 4rem 3rem;\n border-radius: 20px;\n text-align: center;\n color: var(--text-light);\n box-shadow: var(--shadow-lg);\n}\n\n.cta-section h3 {\n color: var(--text-light);\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.cta-section p {\n font-size: 1.1rem;\n margin-bottom: 2rem;\n opacity: 0.95;\n}\n\n/* ===== Footer ===== */\n.footer {\n background-color: var(--dark-bg);\n color: var(--text-light);\n padding: 4rem 0 2rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 3rem;\n margin-bottom: 3rem;\n}\n\n.footer-section h4 {\n color: var(--text-light);\n margin-bottom: 1.5rem;\n font-size: 1.3rem;\n}\n\n.footer-section p {\n color: rgba(255, 255, 255, 0.8);\n line-height: 1.8;\n margin-bottom: 0.5rem;\n}\n\n.footer-section a {\n color: var(--accent-color);\n transition: var(--transition);\n}\n\n.footer-section a:hover {\n color: var(--primary-color);\n}\n\n.footer-bottom {\n text-align: center;\n padding-top: 2rem;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.footer-bottom p {\n color: rgba(255, 255, 255, 0.6);\n font-size: 0.9rem;\n}\n\n/* ===== Responsive Design ===== */\n@media (max-width: 968px) {\n .nav-menu {\n position: fixed;\n top: 60px;\n left: -100%;\n width: 100%;\n height: calc(100vh - 60px);\n background-color: rgba(26, 26, 26, 0.98);\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n transition: var(--transition);\n }\n\n .nav-menu.active {\n left: 0;\n }\n\n .nav-toggle {\n display: flex;\n }\n\n .nav-toggle.active span:nth-child(1) {\n transform: rotate(45deg) translate(5px, 5px);\n }\n\n .nav-toggle.active span:nth-child(2) {\n opacity: 0;\n }\n\n .nav-toggle.active span:nth-child(3) {\n transform: rotate(-45deg) translate(7px, -6px);\n }\n\n .hero-title {\n font-size: 2.5rem;\n }\n\n .hero-subtitle {\n font-size: 1rem;\n }\n\n .hero-description {\n font-size: 1.1rem;\n }\n\n .about-content {\n grid-template-columns: 1fr;\n }\n\n .about-image {\n order: -1;\n }\n\n .section-title {\n font-size: 2rem;\n }\n}\n\n@media (max-width: 768px) {\n html {\n font-size: 14px;\n }\n\n .hero {\n min-height: 80vh;\n }\n\n .hero-title {\n font-size: 2rem;\n }\n\n .hero-buttons {\n flex-direction: column;\n align-items: center;\n }\n\n .btn {\n width: 100%;\n max-width: 300px;\n }\n\n .features-grid,\n .menu-grid,\n .contact-grid {\n grid-template-columns: 1fr;\n }\n\n .cta-section {\n padding: 3rem 2rem;\n }\n\n .footer-content {\n grid-template-columns: 1fr;\n text-align: center;\n }\n}\n\n@media (max-width: 480px) {\n .container {\n padding: 0 15px;\n }\n\n .hero-content {\n padding: 1rem;\n }\n\n .hero-title {\n font-size: 1.8rem;\n }\n\n .section-title {\n font-size: 1.8rem;\n }\n\n .feature-card,\n .menu-category,\n .contact-card {\n padding: 1.5rem;\n }\n\n .cta-section {\n padding: 2rem 1.5rem;\n }\n\n .image-placeholder {\n font-size: 5rem;\n }\n}\n\n/* ===== Animations ===== */\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.fade-in {\n animation: fadeIn 0.6s ease-out;\n}\n\n/* ===== Utility Classes ===== */\n.text-center { text-align: center; }\n.mt-1 { margin-top: 0.5rem; }\n.mt-2 { margin-top: 1rem; }\n.mt-3 { margin-top: 1.5rem; }\n.mb-1 { margin-bottom: 0.5rem; }\n.mb-2 { margin-bottom: 1rem; }\n.mb-3 { margin-bottom: 1.5rem; }", "assets/app.js": "// Navigation Toggle for Mobile\nconst navToggle = document.getElementById('navToggle');\nconst navMenu = document.getElementById('navMenu');\nconst navLinks = document.querySelectorAll('.nav-menu a');\n\n// Toggle mobile menu\nif (navToggle) {\n navToggle.addEventListener('click', () => {\n navToggle.classList.toggle('active');\n navMenu.classList.toggle('active');\n document.body.style.overflow = navMenu.classList.contains('active') ? 'hidden' : 'auto';\n });\n}\n\n// Close mobile menu when clicking on a link\nnavLinks.forEach(link => {\n link.addEventListener('click', () => {\n navToggle.classList.remove('active');\n navMenu.classList.remove('active');\n document.body.style.overflow = 'auto';\n });\n});\n\n// Smooth scrolling for anchor links\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n const href = this.getAttribute('href');\n \n // Skip if it's just \"#\"\n if (href === '#') return;\n \n e.preventDefault();\n const target = document.querySelector(href);\n \n if (target) {\n const headerOffset = 80;\n const elementPosition = target.getBoundingClientRect().top;\n const offsetPosition = elementPosition + window.pageYOffset - headerOffset;\n\n window.scrollTo({\n top: offsetPosition,\n behavior: 'smooth'\n });\n }\n });\n});\n\n// Add scroll effect to header\nconst header = document.querySelector('.header');\nlet lastScroll = 0;\n\nwindow.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n \n if (currentScroll <= 0) {\n header.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';\n } else {\n header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';\n }\n \n lastScroll = currentScroll;\n});\n\n// Intersection Observer for fade-in animations\nconst observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n};\n\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('fade-in');\n observer.unobserve(entry.target);\n }\n });\n}, observerOptions);\n\n// Observe elements for animation\nconst animatedElements = document.querySelectorAll(\n '.feature-card, .menu-category, .contact-card, .about-content'\n);\n\nanimatedElements.forEach(el => observer.observe(el));\n\n// Dynamic current year in footer (if needed)\nconst currentYear = new Date().getFullYear();\nconst yearElements = document.querySelectorAll('.current-year');\nyearElements.forEach(el => {\n el.textContent = currentYear;\n});\n\n// Add loading animation\nwindow.addEventListener('load', () => {\n document.body.classList.add('loaded');\n});\n\n// Prevent scroll restoration on page reload\nif ('scrollRestoration' in history) {\n history.scrollRestoration = 'manual';\n}\n\n// Phone number click tracking (optional analytics)\nconst phoneLinks = document.querySelectorAll('a[href^=\"tel:\"]');\nphoneLinks.forEach(link => {\n link.addEventListener('click', () => {\n console.log('Phone number clicked:', link.href);\n // Add your analytics tracking code here if needed\n });\n});\n\n// Email link click tracking (optional analytics)\nconst emailLinks = document.querySelectorAll('a[href^=\"mailto:\"]');\nemailLinks.forEach(link => {\n link.addEventListener('click', () => {\n console.log('Email link clicked:', link.href);\n // Add your analytics tracking code here if needed\n });\n});\n\n// Add hover effect to menu items\nconst menuItems = document.querySelectorAll('.menu-item');\nmenuItems.forEach(item => {\n item.addEventListener('mouseenter', function() {\n this.style.transform = 'translateX(5px)';\n this.style.transition = 'transform 0.3s ease';\n });\n \n item.addEventListener('mouseleave', function() {\n this.style.transform = 'translateX(0)';\n });\n});\n\n// Scroll to top button (optional enhancement)\nconst createScrollToTop = () => {\n const button = document.createElement('button');\n button.innerHTML = '↑';\n button.className = 'scroll-to-top';\n button.style.cssText = `\n position: fixed;\n bottom: 30px;\n right: 30px;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: var(--primary-color);\n color: white;\n border: none;\n font-size: 24px;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n z-index: 999;\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\n `;\n \n button.addEventListener('click', () => {\n window.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n });\n \n window.addEventListener('scroll', () => {\n if (window.pageYOffset > 300) {\n button.style.opacity = '1';\n button.style.visibility = 'visible';\n } else