/* Grund-Reset */
* {
   margin: 0;
   padding: 0;
}

body {
   background-color: #f6b16c;
}

/* GRID-LAYOUT */
.container {
   font-size: 20px;
   font-family: sans-serif;
   display: grid;
   grid-gap: 2px;
   background-color: #f6b16c;
   
   grid-template-areas: 
     "header header header"
     "navigation main aside"
     "footer footer footer";

   grid-template-columns: 200px 1fr 150px;
   grid-template-rows: 100px 1fr 60px;
   height: 100vh;
}

/* Grundstyle für alle Bereiche */
header,
nav,
main,
aside,
footer {
   display: grid;
   background-color: rgba(245, 206, 128, 0.622);
   align-items: center;
   justify-content: center;
   outline: 1px solid #000000;
}

header { 
   grid-area: header; 
}

main { 
      grid-area: main;
      padding: 30px;     /* Abstand oben + unten + links + rechts */
      overflow-y: auto;  /* scrollen wenn Inhalt zu lang */
      display: flex;
      justify-content: center;
      align-items: flex-start;
   
}

/* --- Galerie Styling --- */
.galerie {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   justify-content: center;
}

.galerie-bild {
   width: 200px;
   height: 200px;
   object-fit: cover;
   border-radius: 10px;
   transition: 0.3s ease;
   cursor: pointer;
}

/* Hover-Effekt */
.galerie-bild:hover {
   transform: scale(1.08);
   filter: brightness(1.15);
}


/* --- Lightbox (Großansicht) --- */
.lightbox {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.85);
   justify-content: center;
   align-items: center;
   z-index: 999;
}

/* Wenn das Ziel angewählt wird → anzeigen */
.lightbox:target {
   display: flex;
}

/* Großes Bild */
.lightbox img {
   max-width: 90%;
   max-height: 90%;
   border-radius: 15px;
   box-shadow: 0 0 20px #000;
}

/* X-Schließen-Button */
.lightbox .close {
   position: fixed;
   top: 20px;
   right: 30px;
   color: white;
   font-size: 50px;
   text-decoration: none;
   z-index: 1000;
   font-weight: bold;
   transition: 0.2s;
}

.lightbox .close:hover {
   transform: scale(1.2);
   color: #ffb27c;
}


aside { 
   grid-area: aside; 
}

footer { 
   grid-area: footer; 
   display: flex;
   gap: 10px;
}

nav { 
   grid-area: navigation; 
   align-items: flex-start;
   padding: 5px;
   line-height: 1.5;
}

/* Navigation */
ul.navigationselemente {
   list-style-type: none;
}

.navigationselemente li a {
   text-decoration: none;
   color: black;
   padding: 3px 5px;
   display: inline-block;
}

.navigationselemente li a:hover {
   background-color: #fdb665;
   border-radius: 10px;
   color: #000000;
}

.navigationselemente li a.active {
   background-color: #f3a454; 
   color: #000000;
   font-weight: 600;
   border-radius: 10px;
}

/* Werbung rechts */
.Werbung {
   writing-mode: vertical-rl;
   background-image: url(Moenchshof-hell.png);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

/* Tabelle nur für Pumpkin Pie */
.pumpkin-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 30px;
   background-color: rgba(255, 230, 200, 0.9);
   border-radius: 10px;
   overflow: hidden;
   font-size: 18px;
}

.pumpkin-table th {
   background-color: rgba(240, 88, 6, 0.95);
   padding: 12px;
   border: 1px solid #000;
   text-align: left;
}

.pumpkin-table td {
   padding: 10px;
   border: 1px solid #000;
}

.pumpkin-table tr:nth-child(even) {
   background-color: rgba(245, 152, 45, 0.8);
}

.pumpkin-table tr:nth-child(odd) {
   background-color: rgba(175, 117, 46, 0.8);
}

/* Special-Kasten nur für die Kürbispasta-Seite */
.pasta-special {
   margin-top: 25px;
   margin-bottom: 25px;
   padding: 15px 20px;
   border-left: 6px solid #e67e22; /* orangener Rand */
   background-color: rgba(255, 245, 220, 0.95);
   border-radius: 10px;
}

.pasta-special h3 {
   margin-top: 0;
   margin-bottom: 10px;
}

.pasta-special ul {
   margin: 0;
   margin-left: 18px;
   line-height: 1.5;
}

/* Zutaten + Bild nebeneinander */
.zutaten-bild-box {
   display: flex;
   gap: 25px;
   align-items: flex-start;
   justify-content: space-between;
}

/* Bild */
.pommes-bild {
   width: 280px;
   border-radius: 10px;
   margin-top: 20px;
   flex-shrink: 0; 
}

/* Handy Ansicht */
@media (max-width: 800px) {
   .zutaten-bild-box {
       flex-direction: column;
       align-items: center;
   }

   .pommes-bild {
       width: 80%;
   }
}





/* RESPONSIVE DESIGN für Handy/Tablet */
@media all and (max-width: 1000px) {

   .container {
       grid-template-areas: 
       "header"
       "navigation"
       "main"
       "footer";

       grid-template-rows: 100px 100px 1fr 80px;
       grid-template-columns: 1fr;
   }

   /* Werbefläche ausblenden */
   aside {
       display: none;
   }

   /* Navigation nebeneinander */
   ul.navigationselemente li {
       display: inline;
       margin: 5px;
   }
}