/* CSS Variables for easy customization */
:root {
   --primary-color: #F39C12;
   --secondary-color: #333;
   --background-dark: #121212;
   --text-color: #fff;
   --accent-color: #E74C3C;
   --font-heading: 'Montserrat', sans-serif;
   --font-body: 'Poppins', sans-serif;
 }

 /* Global Reset and Body Styling */
 *, *::before, *::after {
   box-sizing: border-box;
 }

 html, body {
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: var(--font-body);
   background-color: var(--background-dark);
   color: var(--text-color);
   display: flex;
   flex-direction: column;
 }

 body {
   flex-grow: 1;
 }

 main {
   flex-grow: 1;
 }

 /* Topbar Styling */
 .topbar {
   background-color: var(--secondary-color);
   padding: 10px 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
 }

 .topbar .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .topbar .contact-info a, 
 .topbar .social-icons a {
   color: var(--text-color);
   margin-right: 15px;
   text-decoration: none;
 }

 /* Header Section Styling */
 .header_section {
   background-color: transparent;
   padding: 20px 0;
   position: absolute;
   top: 40px;
   width: 100%;
   z-index: 1000;
 }

 .header_section .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .header_section .navbar-brand {
   color: var(--primary-color);
   font-size: 2rem;
   font-family: 'Cursive', sans-serif;
   display: flex;
   align-items: center;
 }

 .header_section .navbar-brand img {
   margin-right: 10px;
   height: 50px;
 }

 .header_section .navbar-nav {
   display: flex;
   justify-content: space-around;
   width: 100%;
 }

 .header_section .navbar-nav .nav-link {
   color: var(--text-color);
   text-transform: uppercase;
   font-weight: 500;
   font-size: 1rem;
   transition: color 0.3s ease;
 }

 .header_section .navbar-nav .nav-link:hover,
 .header_section .navbar-nav .active .nav-link {
   color: var(--accent-color);
 }

 /* Add margin below the header to push the main content down */
 .food_section {
   padding: 60px 0;
   background-color: var(--background-dark);
   margin-top: 140px;
 }

 /* Content Section Styling */
 .content_section {
   padding: 60px 0;
   background-color: var(--background-dark);
 }

 .content_section h2 {
   color: var(--primary-color);
   font-size: 2.5rem;
   font-family: var(--font-heading);
   margin-bottom: 20px;
   text-align: center;
 }

 .content_section p {
   color: var(--text-color);
   font-size: 1.1rem;
   text-align: center;
 }

 /* Menu Section Styling */
 .food_section .heading_container h2 {
   color: var(--primary-color);
   font-size: 2.5rem;
   font-family: var(--font-heading);
   margin-bottom: 40px;
   text-align: center;
 }

 .food_section .menu-item {
   margin-bottom: 30px;
 }

 .food_section .box {
   background-color: var(--secondary-color);
   border-radius: 10px;
   overflow: hidden;
   transition: transform 0.3s ease-in-out;
 }

 .food_section .box:hover {
   transform: translateY(-10px);
 }

 .food_section .img-box img {
   width: 100%;
   height: auto;
   object-fit: cover;
   transition: transform 0.3s ease-in-out;
 }

 .food_section .img-box img:hover {
   transform: scale(1.05);
 }

 .food_section .detail-box h5 {
   font-size: 1.3rem;
   color: var(--text-color);
 }

 .food_section .detail-box p {
   color: #ccc;
   font-size: 1rem;
 }

 .food_section .detail-box .options h6 {
   color: var(--accent-color);
   font-size: 1.5rem;
   font-weight: 700;
 }

 /* Styling für den Number-Button */
 .number-btn {
   display: inline-block;
   background-color: var(--primary-color);
   color: #fff;
   border: none;
   border-radius: 20px;
   padding: 5px 10px;
   font-size: 1rem;
   font-weight: bold;
   margin-left: 10px;
 }

 /* Filter Buttons */
 .filter-button {
   margin: 0 5px;
   padding: 0.5rem 1rem;
   border: none;
   background-color: var(--secondary-color);
   color: var(--text-color);
   transition: background-color 0.3s ease;
   border-radius: 5px;
   cursor: pointer;
 }

 .filter-button:hover {
   background-color: var(--accent-color);
   color: #fff;
 }

 /* Footer Styling */
 .footer_section {
   margin-top: auto;
   background-color: var(--secondary-color);
   color: var(--text-color);
   padding: 30px 0;
   text-align: center;
 }

 .footer_section p {
   margin: 0;
   font-size: 14px;
 }
 /* Verbesserter Abstand und Layout für die Kategorie-Buttons */
.filter-button {
margin: 10px 10px; /* Abstand zu den benachbarten Buttons */
padding: 12px 20px; /* Größere Buttons für mobile Geräte */
border: none;
background-color: var(--secondary-color);
color: var(--text-color);
transition: background-color 0.3s ease;
border-radius: 5px;
cursor: pointer;
font-size: 1.1rem; /* Größerer Text für bessere Lesbarkeit */
}

/* Hover-Effekt */
.filter-button:hover {
background-color: var(--accent-color);
color: #fff;
}

/* Layout auf kleineren Geräten */
@media (max-width: 768px) {
.filter-button {
 width: 100%; /* Buttons in voller Breite auf mobilen Geräten */
 margin-bottom: 10px; /* Abstand zwischen den Buttons auf Mobilgeräten */
}
}

/* Abstand zwischen den Menü-Items */
.menu-item {
margin-bottom: 30px; /* Mehr Abstand zwischen den Menü-Items */
}

/* Vergrößern der Kategorie-Buttons für bessere Klickbarkeit auf Mobilgeräten */
@media (max-width: 576px) {
.filter-button {
 padding: 15px 25px; /* Größere Buttons für kleinere Bildschirme */
 font-size: 1.2rem;
}
}
/* Styling für den Allergen-Info-Bereich */
#allergen-info {
  padding: 60px 0;
  background-color: var(--background-dark);
}

#allergen-info h2 {
  color: var(--primary-color);
  font-size: 2.5rem;
  font-family: var(--font-heading);
  margin-bottom: 20px;
  text-align: center;
}

#allergen-info p {
  color: var(--text-color);
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 30px;
}

#allergen-info ul {
  list-style-type: none;
  padding: 0;
  max-width: 800px;
  margin: 0 auto;

  /* Hinzugefügte Zeilen für die Spaltenaufteilung */
  column-count: 2;
  column-gap: 20px;
}

#allergen-info ul li {
  background-color: var(--secondary-color);
  color: var(--text-color);
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

#allergen-info ul li strong {
  color: var(--accent-color);
  margin-right: 10px;
  min-width: 30px;
}

/* Hover-Effekt für die Liste */
#allergen-info ul li:hover {
  background-color: var(--accent-color);
  color: #fff;
  cursor: default;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  #allergen-info h2 {
    font-size: 2rem;
  }
  #allergen-info p,
  #allergen-info ul li {
    font-size: 1rem;
  }
  #allergen-info ul {
    column-count: 1; /* Wechsel zu einer Spalte bei kleineren Bildschirmen */
  }
}
.navbar-nav .nav-link {
  padding-right: 0;
}