Mockup
Speise
:root{
--bg:#110f0d;
--bg-soft:#1d1713;
--cream:#fff7e8;
--sand:#e8d5b7;
--gold:#c99b55;
--red:#9e2f22;
--green:#2f5d46;
--text:#1b1714;
--muted:#6d6259;
--white:#fff;
--shadow:0 24px 70px rgba(0,0,0,.25);
--radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--cream);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,56px);color:var(--white);background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));transition:.25s}
.site-header.scrolled{background:rgba(17,15,13,.92);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.06em}
.brand small{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--sand)}
.brand-mark{width:44px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-family:"Cormorant Garamond",serif;font-size:20px;background:rgba(255,255,255,.08)}
.main-nav{display:flex;gap:24px;align-items:center;font-size:14px;font-weight:700}
.nav-cta{padding:11px 17px;border-radius:999px;background:var(--red);color:white}
.nav-toggle{display:none;background:none;color:white;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:9px 14px}
.hero{min-height:96vh;position:relative;display:grid;place-items:center;color:white;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1800&q=80') center/cover;transform:scale(1.04)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.34),rgba(0,0,0,.2)),radial-gradient(circle at 20% 70%,rgba(158,47,34,.45),transparent 35%)}
.hero-content{position:relative;width:min(1120px,92vw);padding-top:80px}
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:var(--gold);margin:0 0 14px}.eyebrow.dark{color:var(--red)}
h1,h2,h3{font-family:"Cormorant Garamond",serif;line-height:.98;margin:0;color:inherit}
h1{font-size:clamp(58px,9vw,126px);max-width:900px}h2{font-size:clamp(40px,6vw,76px)}h3{font-size:30px}.lead{font-size:clamp(18px,2vw,25px);max-width:700px;color:#f2e7d5;margin:28px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-weight:800;border:1px solid transparent;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--gold);color:#21150d}.btn-ghost{border-color:rgba(255,255,255,.45);color:white;background:rgba(255,255,255,.08)}.btn-dark{background:var(--bg);color:white;width:100%}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}.trust-row span{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);border-radius:999px;padding:9px 14px;font-weight:700;font-size:13px}
.section-pad{padding:110px clamp(20px,5vw,70px)}.section-heading{max-width:780px;margin:0 auto 48px;text-align:center}.section-heading p:not(.eyebrow){color:var(--muted);font-size:18px}
.reservation-strip{margin:-74px auto 0;position:relative;z-index:5;width:min(1180px,92vw);background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;display:grid;grid-template-columns:1fr 1.8fr;gap:30px;align-items:end}.reservation-strip h2{font-size:42px}.reservation-strip p{margin:8px 0 0;color:var(--muted)}.reserve-form{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.reserve-form label span{display:block;font-size:12px;font-weight:800;margin-bottom:6px}.reserve-form input{width:100%;padding:15px 13px;border:1px solid #dbc8aa;border-radius:14px;background:white;font:inherit}
.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.intro-card{background:white;border-radius:var(--radius);padding:34px;box-shadow:0 14px 45px rgba(60,30,10,.08);border:1px solid #eadcc5}.intro-card p{color:var(--muted)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;background:#fffaf0}.story-image{min-height:620px;border-radius:var(--radius);background:url('https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=1000&q=80') center/cover;box-shadow:var(--shadow)}.story-text p{font-size:18px;color:var(--muted)}.text-link{display:inline-block;margin-top:12px;color:var(--red);font-weight:800;border-bottom:2px solid var(--red)}
.menu-section{background:var(--bg);color:white}.menu-section .section-heading p:not(.eyebrow){color:#d7c5aa}.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.menu-card{background:var(--bg-soft);border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden}.menu-card img{height:240px;width:100%;object-fit:cover}.menu-card div{padding:24px}.menu-card p{color:#d7c5aa}.menu-card h3{font-size:29px}
.parallax-quote{min-height:520px;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)),url('https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=1800&q=80') center/cover fixed;display:grid;place-items:center;padding:40px}.quote-card{background:rgba(17,15,13,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:46px;max-width:760px;color:white;text-align:center}.quote-card p{font-family:"Cormorant Garamond",serif;font-size:clamp(34px,5vw,58px);line-height:1.05;margin:0}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:16px}.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:22px}.gallery-grid .tall{grid-row:span 2}.gallery-grid .wide{grid-column:span 2}
.occasion{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;background:#fffaf0}.occasion-text p{font-size:18px;color:var(--muted)}.occasion-list{display:flex;flex-wrap:wrap;gap:12px}.occasion-list span{background:white;border:1px solid #eadcc5;border-radius:999px;padding:14px 18px;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.faq-list{max-width:930px;margin:auto;display:grid;gap:14px}.faq details{background:white;border:1px solid #eadcc5;border-radius:20px;padding:20px 24px}.faq summary{cursor:pointer;font-weight:900;font-size:18px}.faq p{color:var(--muted)}
.final-cta{background:linear-gradient(110deg,rgba(17,15,13,.92),rgba(82,20,15,.88)),url('https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?auto=format&fit=crop&w=1800&q=80') center/cover;color:white;text-align:center;padding:120px 20px}.final-cta div{max-width:840px;margin:auto}.final-cta p:not(.eyebrow){color:#f0dfc6;font-size:19px}.final-cta .btn{margin-top:16px}
.footer{display:flex;justify-content:space-between;gap:30px;padding:42px clamp(20px,5vw,70px);background:var(--bg);color:white}.footer p{color:#ccbca2}.footer-links{display:flex;gap:20px;align-items:center;color:#ccbca2}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
@media (max-width:900px){.main-nav{position:absolute;top:72px;right:18px;left:18px;display:none;flex-direction:column;background:rgba(17,15,13,.96);padding:22px;border-radius:20px}.main-nav.open{display:flex}.nav-toggle{display:block}.reservation-strip,.story,.occasion{grid-template-columns:1fr}.reserve-form{grid-template-columns:1fr 1fr}.intro-grid,.menu-grid{grid-template-columns:1fr 1fr}.gallery-grid{grid-template-columns:1fr 1fr}.footer{flex-direction:column}.story-image{min-height:420px}}
@media (max-width:560px){h1{font-size:52px}.section-pad{padding:78px 18px}.reservation-strip{padding:20px}.reserve-form,.intro-grid,.menu-grid,.gallery-grid{grid-template-columns:1fr}.gallery-grid .wide,.gallery-grid .tall{grid-column:auto;grid-row:auto}.hero-content{padding-top:110px}.btn{width:100%}.footer-links{flex-direction:column;align-items:flex-start}}