:root { 
  --red:#9B1B30; 
  --red-dark:#671322; 
  --red-bright:#B83249; 
  --ink:#f0e1e6; 
  --cream:#9B1B30; 
  --line:rgba(255,255,255,.35); 
  --muted:#f3dce0; 
  --glass:rgba(255,255,255,.16); 
  --glass-dark:rgba(45,0,10,.2); 
  --floating-bottom:28px; 
}

* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
html { scroll-behavior:smooth; }
body { margin:0; color:#fff; background:var(--cream); font-family:'Montserrat',sans-serif; }
a { color:inherit; text-decoration:none; }

.nav-shell { 
  position:fixed; 
  z-index:100; 
  top:18px; 
  left:5vw; 
  width:90%; 
  height:70px; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:0 24px; 
  border:1px solid rgba(255,255,255,.35); 
  border-radius:18px; 
  background:rgba(103,19,34,.68); 
  box-shadow:0 14px 35px rgba(45,0,10,.18),inset 0 1px rgba(255,255,255,.18); 
  backdrop-filter:blur(22px); 
  -webkit-backdrop-filter:blur(22px); 
}

.brand { display:flex; gap:10px; align-items:center; font-size:19px; font-weight:700; letter-spacing:.11em; }
.brand img { display:block; width:112px; height:48px; object-fit:contain; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:#fff; background:var(--red); border-radius:50%; font-family:'Montserrat',sans-serif; font-size:21px; letter-spacing:0; }
.desktop-nav { display:flex; gap:38px; margin-left:auto; margin-right:45px; font-size:13px; }
.desktop-nav a:hover,.text-link:hover,footer a:hover { color:#d8f5e3; }

.button { display:inline-flex; align-items:center; gap:18px; padding:16px 20px; color:#fff; background:linear-gradient(135deg,var(--red-bright),var(--red) 58%,var(--red-dark)); border:1px solid rgba(255,255,255,.28); box-shadow:0 9px 25px rgba(118,13,27,.23),inset 0 1px rgba(255,255,255,.3); font-family:'Montserrat',sans-serif; font-size:12px; transition:.2s ease; }
.button:hover { background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); }
.button span,.text-link span { font-size:17px; }
.button-small { padding:12px 16px; gap:12px; }

.floating-order { position:fixed !important; z-index:1000; right:28px; bottom:var(--floating-bottom, 28px); border-radius:999px; }
.menu-toggle { display:none; border:0; background:none; font-size:24px; }
.language-toggle { margin-right:18px; padding:7px 9px; color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); border-radius:999px; font-family:'Montserrat',sans-serif; font-size:10px; cursor:pointer; }
.section-pad { padding:90px 10vw; }
main { padding-top:106px; }

/* HERO */
.hero { min-height:calc(100vh - 88px); max-height:760px; display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; padding-top:24px; padding-bottom:24px; }
.eyebrow,.section-label,.card-meta, .image-caption, .hero-note, .marquee { font-family:'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--red); }
.pulse { width:8px; height:8px; background:var(--red); border-radius:50%; box-shadow:0 0 0 5px #f5d3cb; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:'Montserrat',sans-serif; font-weight:700; line-height:.98; letter-spacing:-.06em; }
h1 { font-size:clamp(58px,7.2vw,108px); margin:30px 0; }
h2 { font-size:clamp(48px,6vw,82px); margin:20px 0 35px; }
#hero-subtitle { font-weight:400; font-style:normal; letter-spacing:0; line-height:1.35; font-size:clamp(20px,2.6vw,28px); margin:0 0 24px; }
em { color:var(--red); font-weight:500; }
.hero h1 em { color:#fff; }
.hero-intro { max-width:370px; color:#e0f7e8; font-size:16px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:29px; margin-top:34px; }
.text-link { display:inline-flex; align-items:center; gap:12px; font-family:'Montserrat',sans-serif; font-size:11px; border-bottom:1px solid currentColor; padding-bottom:5px; }
.hero-note { display:flex; gap:25px; margin-top:75px; color:var(--muted); }
.hero-note strong { color:#fff; font-weight:400; }
.hero-visual { position:relative; height:550px; }
.tile-panel { position:absolute; left:-55px; top:52px; width:160px; height:310px; background-color:var(--red-dark); background-image:linear-gradient(90deg,rgba(255,255,255,.15) 2px,transparent 2px),linear-gradient(rgba(255,255,255,.15) 2px,transparent 2px); background-size:40px 40px; transform:rotate(-5deg); }
.hero-image { position:absolute; inset:0 0 8px 25px; overflow:hidden; border:1px solid rgba(255,255,255,.65); box-shadow:18px 18px 0 var(--red),0 25px 65px rgba(20,10,10,.22); border-radius: 10px; }
.hero-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.9); }
.image-caption { position:absolute; bottom:0; left:45px; right:0; display:flex; justify-content:space-between; color:var(--muted); }
.stamp { position:absolute; right:-30px; top:40px; display:grid; place-items:center; width:90px; height:90px; color:var(--red); border:1px solid rgba(170,10,39,.38); border-radius:50%; background:rgba(255,255,255,.27); box-shadow:0 12px 30px rgba(30,20,20,.08),inset 0 1px rgba(255,255,255,.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-family:'Montserrat',sans-serif; font-size:13px; line-height:1.1; text-align:center; transform:rotate(12deg); }.stamp b { font-size:22px; }

.marquee { display:flex; justify-content:space-around; align-items:center; padding:21px 5vw; color:#fff; background:var(--red); overflow:hidden; }.marquee i { font-size:18px; font-style:normal; }

/* STORY */
.story { max-height:760px; position:relative; overflow:hidden; background:var(--red-dark); color:#f5f0e8; }
.story:after { content:""; position:absolute; right:-12vw; top:-18vw; width:40vw; height:40vw; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 38px rgba(255,255,255,.035),0 0 0 76px rgba(255,255,255,.025); }
.section-label { color:#d8f5e3; }
.story-content { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; }
.story h2 { margin-bottom:0; }
.story-text { max-width:390px; color:#d2f0dd; line-height:1.7; font-size:15px; }
.story-text .text-link { color:#f5f0e8; margin-top:20px; }
.story-stats { display:flex; gap:clamp(45px,10vw,145px); margin-top:100px; padding-top:24px; border-top:1px solid rgba(255,255,255,.28); }
.story-stats div { display:flex; gap:16px; align-items:center; }
.story-stats strong { font-family:'Montserrat',sans-serif; color:#d8f5e3; font-size:40px; font-weight:700; }
.story-stats span { color:#d2f0dd; font-family:'Montserrat',sans-serif; font-size:10px; line-height:1.5; text-transform:uppercase; }

/* MENU */
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:45px; }
.section-heading h2 { margin-bottom:0; }
.menu-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px; }
.menu-card { overflow:hidden; background:var(--glass); border:1px solid rgba(255,255,255,.52); box-shadow:0 15px 40px rgba(40,25,15,.055),inset 0 1px rgba(255,255,255,.62); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:transform .25s ease,box-shadow .25s ease; }
.menu-card:hover { transform:translateY(-8px) rotate(-.4deg); box-shadow:0 23px 50px rgba(40,25,15,.11),inset 0 1px rgba(255,255,255,.75); }
.dish-image { height:270px; background-size:cover; background-position:center; }
.card-content { padding:20px 22px 25px; }
.card-meta { display:flex; justify-content:space-between; color:var(--red); }
.card-meta b { font-weight:400; color:var(--ink); }
.menu-card h3 { margin:23px 0 7px; font-family:'Montserrat',sans-serif; font-size:27px; font-weight:500; }
.menu-card p { margin:0; color:var(--muted); font-size:12px; }

/* VISIT / CARDS (Korrektur per Flexbox) */
.visit { 
  min-height:calc(100vh - 88px); 
  max-height:none; 
  overflow:visible; 
  display:grid; 
  grid-template-columns:1.1fr 1fr 1fr; 
  gap:clamp(28px,4vw,70px); 
  color:#fff; 
  background:var(--red); 
}
.visit .section-label { color:#f3dce0; }
.visit .visit-copy, .visit .hours, .visit .social-panel { min-width:0; }
.visit .visit-copy { overflow:visible; }
.visit h2 em { color:#fff; }
.visit-copy p { max-width:390px; line-height:1.7; color:#f3dce0; }
.visit .button { color:var(--red-dark); background:#fff; border-color:#fff; margin-top:15px; }
.visit .button:hover { color:#fff; background:var(--ink); border-color:var(--ink); }

/* Flexbox Layout für .hours & .social-panel anstelle absoluter Positionierung */
.hours, .social-panel { 
  display:flex; 
  flex-direction:column; 
  height:100%; 
  overflow:hidden; /* Sicherheitsnetz gegen Rausragen */
  padding:30px; 
  border-radius:16px; 
  background:var(--glass-dark); 
  border:1px solid rgba(255,255,255,.35); 
  box-shadow:0 16px 32px rgba(45,0,10,.12), inset 0 1px rgba(255,255,255,.25); 
}

.hours h3, .social-panel h3 { margin:0 0 8px; font-size:18px; line-height:1.2; }
.hours > div { display:flex; justify-content:space-between; gap:18px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.35); font-size:11px; }
.hours strong { font-weight:600; }
.hours address { margin-top:20px; font-style:normal; font-size:11px; line-height:1.8; }
.hours address a, .instagram-profile-link { text-decoration:underline; }

.social-panel p { max-width:240px; color:#f3dce0; font-size:13px; line-height:1.6; margin-bottom:8px; }
.instagram-profile-link { display:inline-block; font-size:12px; }

/* Dynamischer Platzhalter per Flex-Grow */
.map-frame { 
  flex-grow:1; 
  width:100%; 
  min-height:220px; 
  max-height:300px; 
  margin-top:20px; 
  overflow:hidden; 
  border:1px solid rgba(255,255,255,.4); 
  border-radius:8px; 
}
.map-frame iframe { display:block; width:100%; height:100%; border:0; }

.instagram-embed { 
  flex-grow:1; 
  width:100%; 
  min-height:220px; 
  max-height:430px; 
  margin-top:20px; 
  overflow:hidden; 
  border-radius:8px; 
}
.instagram-embed .instagram-media { width:100% !important; min-width:0 !important; max-width:100% !important; margin:0 auto !important; border-radius:8px !important; box-shadow:none !important; }
.instagram-placeholder { padding:28px 18px; color:var(--red-dark); background:#fff; text-align:center; font-size:12px; }
.instagram-placeholder a { color:#3897f0; text-decoration:underline; }

/* CONSENT */
.consent-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; height:100%; min-height:220px; padding:22px; text-align:center; background:var(--glass-dark); }
.consent-text { margin:0; max-width:280px; color:var(--muted); font-size:11px; line-height:1.6; }
.consent-text a { color:inherit; text-decoration:underline; }
.consent-button { cursor:pointer; margin-top:0 !important; }

/* FOOTER */
footer { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin:18px 5vw 24px; padding:24px; color:#f3dce0; background:rgba(103,19,34,.68); border:1px solid rgba(255,255,255,.35); border-radius:18px; box-shadow:0 14px 35px rgba(45,0,10,.18),inset 0 1px rgba(255,255,255,.18); font-family:'Montserrat',sans-serif; font-size:9px; text-transform:uppercase; letter-spacing:.06em; } 
footer .brand { color:#fff; font-family:'Montserrat',sans-serif; font-size:15px; } 
footer .brand-mark { width:24px;height:24px;font-size:17px; } 
footer div { display:flex; gap:24px; }

/* LEGAL */
.legal-page { min-height:calc(100vh - 170px); padding-top:150px; color:#fff; }
.legal-page h1 { margin-bottom:28px; }
.legal-page p { max-width:680px; color:#f3dce0; line-height:1.8; }
.legal-copy { max-width:760px; }
.legal-copy strong { color:#fff; }

main ul, main ol { margin:0 0 1.2em; padding-left:1.1em; font:inherit; line-height:inherit; color:#f3dce0; }
main ul { list-style:none; padding-left:1.4em; }
main ul li { position:relative; margin-bottom:10px; }
main ul li:last-child { margin-bottom:0; }
main ul li::before { content:""; position:absolute; left:-1.1em; top:0.55em; width:6px; height:6px; border-radius:50%; background:currentColor; }
main ol li { margin-bottom:10px; }

/* BREAKPOINTS */
@media (min-width:761px) and (max-width:1024px) {
  .hero { min-height:0; padding-top:30px; padding-bottom:30px; }
  .hero-visual { height:460px; }
  .story { min-height:0; max-height:none; padding-top:60px; padding-bottom:60px; }
  .visit { min-height:0; }
}

@media (max-width:760px) {
  main { padding-top:88px; }
  .nav-shell { top:10px; left:4vw; width:92%; max-width:calc(100% - 8vw); height:60px; padding:0 16px; border-radius:15px; }
  .brand img { width:92px; height:42px; }
  .desktop-nav, .nav-shell > .button:not(.floating-order) { display:none; }
  .language-toggle { margin-left:auto; margin-right:14px; }
  .menu-toggle { display:block; color:#fff; }
  .desktop-nav.mobile-open { position:absolute; z-index:5; top:60px; left:0; right:0; display:flex; flex-direction:column; gap:0; margin:0; padding:10px 7vw; background:var(--red-dark); border-bottom:1px solid rgba(255,255,255,.3); border-radius:0 0 14px 14px; }
  .desktop-nav.mobile-open a { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.25); }
  
  .section-pad { padding:68px 7vw; }
  .hero, .story, .visit { min-height:0; max-height:none; }
  .hero { display:block; padding-top:35px; padding-bottom:24px; }
  .hero-visual { height:400px; margin-top:35px; }
  .hero-image { inset:0 0 8px 20px; box-shadow:12px 12px 0 var(--red-dark); }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
  .hero h1 { font-size:clamp(54px,16vw,76px); }
  
  .story-content { grid-template-columns:1fr; gap:10px; }
  .story h2, .visit h2 { font-size:clamp(44px,13vw,66px); }
  .story-stats { gap:20px; margin-top:60px; flex-wrap:wrap; }
  .story-stats strong { font-size:34px; }
  
  .visit { grid-template-columns:1fr; gap:45px; }
  .hours, .social-panel { height:auto; padding:22px; }
  .hours > div { gap:16px; line-height:1.4; }
  .hours strong { text-align:right; }
  
  .map-frame, .instagram-embed { position:static; width:100%; height:260px; max-width:none; max-height:none; margin-top:24px; flex-grow:0; }
  .map-frame iframe { height:100%; }
  
  .floating-order { right:12px; bottom:calc(var(--floating-bottom, 18px) + env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); padding:12px 16px; gap:8px; white-space:nowrap; font-size:11px; }
  
  footer { width:calc(100% - 8vw); margin:10px 4vw 18px; padding:18px 16px; border-radius:15px; flex-wrap:wrap; gap:20px; }
  footer > span { order:3; width:100%; }
  footer div { flex-wrap:wrap; gap:14px; }
}