**Commit message:**

Remove redundant comments and simplify layout logic in MainPageLayout

**Description:**
Deleted unnecessary inline comments and streamlined responsive navigation/content rendering logic. Maintained core functionality while improving code clarity and reducing visual noise in the component structure.

src/components/MainPageLayout.js

@@ -18,12 +18,10 @@ const MainPageLayout = () => {
   const { t } = useTranslation();
   const [starHovered, setStarHovered] = React.useState(false);
 
-  // Determine which page we're on
   const isHome = currentPath === "/";
   const isAktionen = currentPath === "/aktionen";
   const isFiliale = currentPath === "/filiale";
 
-  // Add CSS animations for rotating stars
   React.useEffect(() => {
     const style = document.createElement('style');
     style.textContent = `
@@ -50,13 +48,11 @@ const MainPageLayout = () => {
       }
     `;
     document.head.appendChild(style);
-    
     return () => {
       document.head.removeChild(style);
     };
   }, []);
 
-  // Get navigation config based on current page
   const getNavigationConfig = () => {
     if (isHome) {
       return {
@@ -83,7 +79,6 @@ const MainPageLayout = () => {
     filiale: t('titles.home')
   };
 
-  // Define all content boxes for layered rendering
   const allContentBoxes = {
     home: [
       {
@@ -129,7 +124,6 @@ const MainPageLayout = () => {
     ]
   };
 
-  // Get opacity for each page layer
   const getOpacity = (pageType) => {
     if (pageType === "home" && isHome) return 1;
     if (pageType === "aktionen" && isAktionen) return 1;
@@ -139,7 +133,6 @@ const MainPageLayout = () => {
 
   const navConfig = getNavigationConfig();
 
-  // Navigation text mapping for translation
   const navTexts = [
     { key: 'aktionen', text: t('navigation.aktionen'), link: '/aktionen' },
     { key: 'filiale', text: t('navigation.filiale'), link: '/filiale' },
@@ -149,8 +142,6 @@ const MainPageLayout = () => {
   return (
     <Container maxWidth="lg" sx={{ py: 2 }}>
       <style>{getCombinedAnimatedBorderStyles(['seeds', 'cutlings'])}</style>
-      
-      {/* Main Navigation Header */}
       <Box sx={{ 
         display: "flex", 
         alignItems: "center", 
@@ -159,13 +150,11 @@ const MainPageLayout = () => {
         mt: 2,
         px: 0,
         transition: "all 0.3s ease-in-out",
-        // Portrait phone: stack title above navigation
         flexDirection: { 
           xs: "column", 
           sm: "row" 
         }
       }}>
-        {/* Title for portrait phones - shown first */}
         <Box sx={{ 
           display: { xs: "block", sm: "none" },
           mb: { xs: 2, sm: 0 },
@@ -201,15 +190,12 @@ const MainPageLayout = () => {
             </Typography>
           ))}
         </Box>
-
-        {/* Navigation container for portrait phones */}
         <Box sx={{ 
           display: { xs: "flex", sm: "contents" },
           width: { xs: "100%", sm: "auto" },
           justifyContent: { xs: "space-between", sm: "initial" },
           alignItems: "center"
         }}>
-          {/* Left Navigation - Layered rendering */}
           <Box sx={{ 
             display: "flex", 
             alignItems: "center", 
@@ -221,7 +207,6 @@ const MainPageLayout = () => {
             {navTexts.map((navItem, index) => {
               const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
               const link = navItem.link;
-              
               return (
                 <Box
                   key={navItem.key}
@@ -259,8 +244,6 @@ const MainPageLayout = () => {
               );
             })}
           </Box>
-
-          {/* Center Title - Layered rendering - Hidden on portrait phones, shown on larger screens */}
           <Box sx={{ 
             flex: 1, 
             display: { xs: "none", sm: "flex" },
@@ -298,8 +281,6 @@ const MainPageLayout = () => {
               </Typography>
             ))}
           </Box>
-
-          {/* Right Navigation - Layered rendering */}
           <Box sx={{ 
             display: "flex", 
             alignItems: "center", 
@@ -311,7 +292,6 @@ const MainPageLayout = () => {
             {navTexts.map((navItem, index) => {
               const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
               const link = navItem.link;
-              
               return (
                 <Box
                   key={navItem.key}
@@ -351,8 +331,6 @@ const MainPageLayout = () => {
           </Box>
         </Box>
       </Box>
-
-      {/* Content Boxes - Layered rendering */}
       <Box sx={{ position: "relative", mb: 4 }}>
         {Object.entries(allContentBoxes).map(([pageType, contentBoxes]) => (
           <Grid 
@@ -371,7 +349,6 @@ const MainPageLayout = () => {
           >
             {contentBoxes.map((box, index) => (
               <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
-                {/* Multi-pointed star for seeds box - moved to Grid level */}
                 {index === 0 && pageType === "filiale" && (
                   <Box
                     sx={{
@@ -381,15 +358,12 @@ const MainPageLayout = () => {
                       width: '180px',
                       height: '180px',
                       zIndex: 999,
-                      pointerEvents: 'auto',
+                      pointerEvents: 'none',
-                      cursor: 'pointer',
+                      '& *': { pointerEvents: 'none' },
                       filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.4))',
                       display: { xs: 'none', sm: 'block' }
                     }}
-                    onMouseEnter={() => setStarHovered(true)}
-                    onMouseLeave={() => setStarHovered(false)}
                   >
-                    {/* Background star - slightly larger and rotated */}
                     <svg 
                       viewBox="0 0 60 60" 
                       width="168" 
@@ -408,8 +382,6 @@ const MainPageLayout = () => {
                         stroke="none"
                       />
                     </svg>
-                    
-                    {/* Middle star - medium size with different rotation */}
                     <svg 
                       viewBox="0 0 60 60" 
                       width="159" 
@@ -428,8 +400,6 @@ const MainPageLayout = () => {
                         stroke="none"
                       />
                     </svg>
-                    
-                    {/* Foreground star - main star with text */}
                     <svg 
                       viewBox="0 0 60 60" 
                       width="150" 
@@ -442,8 +412,6 @@ const MainPageLayout = () => {
                         stroke="none"
                       />
                     </svg>
-                    
-                    {/* Text positioned in the center of the star */}
                     <div
                       style={{
                         position: 'absolute',
@@ -464,8 +432,6 @@ const MainPageLayout = () => {
                     >
                       {t('sections.showUsPhoto')}
                     </div>
-                    
-                    {/* Hover text */}
                     <div
                       style={{
                         position: 'absolute',
@@ -488,8 +454,6 @@ const MainPageLayout = () => {
                     </div>
                   </Box>
                 )}
-                
-                {/* Multi-pointed star for stecklinge box - bottom right */}
                 {index === 1 && pageType === "filiale" && (
                   <Box
                     sx={{
@@ -499,16 +463,16 @@ const MainPageLayout = () => {
                       width: '180px',
                       height: '180px',
                       zIndex: 999,
-                      pointerEvents: 'auto',
+                              pointerEvents: 'none',
-                      cursor: 'pointer',
+                      '& *': { pointerEvents: 'none' },
-                      filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(175, 238, 238, 0.8)) drop-shadow(0 0 40px rgba(175, 238, 238, 0.4))',
+                      filter:
+                        'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(175, 238, 238, 0.8)) drop-shadow(0 0 40px rgba(175, 238, 238, 0.4))',
                       display: { xs: 'none', sm: 'block' }
                     }}
                   >
-                    {/* Background star - slightly larger and rotated */}
+                    <svg
-                    <svg 
+                      viewBox="0 0 60 60"
-                      viewBox="0 0 60 60" 
+                      width="168"
-                      width="168" 
                       height="168"
                       className="star-rotate-slow-ccw"
                       style={{
@@ -524,8 +488,6 @@ const MainPageLayout = () => {
                         stroke="none"
                       />
                     </svg>
-                    
-                    {/* Middle star - medium size with different rotation */}
                     <svg 
                       viewBox="0 0 60 60" 
                       width="159" 
@@ -544,11 +506,9 @@ const MainPageLayout = () => {
                         stroke="none"
                       />
                     </svg>
-                    
+                    <svg
-                    {/* Foreground star - main star with text */}
+                      viewBox="0 0 60 60"
-                    <svg 
+                      width="150"
-                      viewBox="0 0 60 60" 
-                      width="150" 
                       height="150"
                       className="star-rotate-slow-cw"
                     >
@@ -558,8 +518,6 @@ const MainPageLayout = () => {
                         stroke="none"
                       />
                     </svg>
-                    
-                    {/* Text positioned in the center of the star */}
                     <div
                       style={{
                         position: 'absolute',
@@ -580,7 +538,6 @@ const MainPageLayout = () => {
                     </div>
                   </Box>
                 )}
-                
                 <div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>
                   <Paper
                     component={Link}
@@ -601,6 +558,8 @@ const MainPageLayout = () => {
                         boxShadow: 20,
                       },
                     }}
+                    onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
+                    onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
                   >
                     <Box
                       sx={{
@@ -612,7 +571,6 @@ const MainPageLayout = () => {
                         justifyContent: "center",
                       }}
                     >
-                      {/* Image loaded only when needed */}
                       {getOpacity(pageType) === 1 && (
                         <img
                           src={box.image}
@@ -656,8 +614,6 @@ const MainPageLayout = () => {
           </Grid>
         ))}
       </Box>
-
-      {/* Shared Carousel */}
       <SharedCarousel />
     </Container>
   );