/* import Google Fonts Poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 /**{
    outline: 1px solid red;
  }*/

html, body {
  overflow: auto;
  min-height: 100%;
}
body{
   background-image: url('./imagesOptimized/images/webp/Lango_laenge_Home.webp');
  background-size: cover;       /* Bild auf gesamte Fläche anpassen */
  background-repeat: no-repeat; /* Kein Wiederholen des Bildes */
  background-position: center;  /* Bild zentrieren */
   background-attachment: fixed; 
}
*{margin: 0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Poppins', 'san-serifs'}

 


.hidden {
  display: none !important;
}
/* Footer ausblenden, ohne Grid kaputtzumachen */
.hidden-footer {
  visibility: hidden;  /* unsichtbar */
  height: 0;           /* Höhe auf 0 */
  overflow: hidden;    /* Inhalt ausblenden */
  transition: all 0.3s ease; /* optional: sanftes Ausblenden */
}


.container{
  max-width: 100%;
      /* Höhe des Viewports */
  color: white;                 /* Text besser lesbar bei dunklem Bild */
}
  *, *::before, *::after {
  box-sizing: border-box;
}
 /* Nav menu */
.side-menu {
  opacity: 0;
  width: 0;
  height: 0;
 } 
 .container .main.hidden { display: none; }



/* Responsive Bilddarstellung */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ==== SVG-Styling ==== */
.social-icon {
  width: 28px;          /* gewünschte Breite */
  height: 28px;         /* gewünschte Höhe */
  color: white;         /* Icon-Farbe (wirkt über currentColor) */
  transition: transform 0.2s ease, color 0.3s ease;
  cursor: pointer;
}

/* Hover-Effekt */
.social-icon:hover {
  color: #ffeb3b;       /* z. B. Gelb */
  transform: scale(1.2);
}



        .container {
        /*width: 100vh;  Make sure content takes the full width */
         
        grid-template-columns: repeat(1, 1fr);
       
        
        grid-template-areas: 
        
        "header"
        "main"
        "main"
        "main"
        "main"
        "main"
        "main"
        "main"
        "main"
        "footer  "
        
        }
       .container .header{
      place-items: center; /* zentriert horizontal & vertikal */
        position: relative;
        z-index: 2;
        height: 20%;
        overflow: visible;
       display: grid ;
       
     
      
       }
       .container .main{
        position: relative;
        place-items: center; /* zentriert horizontal & vertikal */
        display: grid ; 
      
        grid-template-columns: repeat(1, 1fr);
       }
       /*.container .main{
        grid-area: main;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(100px, auto);

        }*/
       footer.footer {
 display: grid;
  color: white;
  padding: 0.5rem 1rem;   /* Weniger Innenabstand (statt 2rem) */
  line-height: 1.2;       /* Kompakterer Textabstand */
  font-size: 0.9rem;  
 text-align: center;
  position: relative; 
 z-index: 1;
  overflow: hidden; 
  margin-top: 10em;
}
footer.footer .impressum a,
 .datenschutz a{
  color: inherit;       /* nimmt die Textfarbe des Umfelds */
  text-decoration: none; /* keine Unterstreichung */
 font-weight: 600;
}

.kontaktImpressum{
  color: inherit;       /* nimmt die Textfarbe des Umfelds */
  /*text-decoration: none; /* keine Unterstreichung */
}
.datenschutzerklärung{
  padding: 2em;
}
.datenschutzerklärung p,
.datenschutzerklärung h2{
  text-align: left;
}
.datenschutzerklärung ul{
  margin-left: 68px;
}

    
  
     
        .container .header .nav .menu{
          list-style: none;
          max-height: 300px;
        
          
        }

      header .icons span {
  display: inline-flex;       /* Flex, damit Inhalt zentriert wird */
  align-items: center;        /* Vertikale Zentrierung */
  justify-content: center;    /* Horizontale Zentrierung */
  width: 38px;                /* Breite des Icons */
  height: 38px;               /* Höhe des Icons */
  border-radius: 50%;         /* optional: runde Hover-Fläche */
}



      
        .nav{
          display: flow-root;
          width: auto;
          height: 100%;
          position: fixed;
           inset: 0; /* shorthand for top, right, bottom, left: 0 */
          overflow: hidden;
          max-height: 0;
          transition: max-height .4s ease-out;
          z-index: 4;
  
        }
       /* .nav { z-index: 9999; position: fixed; inset: 0; }*/

        /* Navigation menu inside overlay */
          .menu {
            position: relative;
            display: grid;
            gap: 3rem; /* Use rem for better scalability */
            margin-top: 4rem;
            left: 0; /* Align to center with flex parent */
            text-align: center;
            font-weight: bold;
            font-size: 150%;
          
          }

     
        .menu  .home{
         
          grid-row: 1/2;
          
          
        }
        .menu  .events{ 
        
       
        grid-row: 2/3;
      
        
        }
        .menu  .langos{
       
        grid-row: 3/4;
       
        
        }

      
        .menu  .uns {
          position: relative;
          
          grid-row: 4/5;
          
          
        }
     
        .menu  .kontakt{
         
          grid-row: 5/6;
          
        }
        .menu  .logo{
         
         display: none;
       
        }
 
       nav li a{
      text-decoration:none;
      color: #ffeb3b;
    
    }
        nav li a:hover{
          color: aliceblue;
          transition: 0.7s;
        }
  

     
      /* Active class to slide nav into view */
.nav.active {
  transform: translateY(0);
}

      .region-select{
      position: relative;
        
       text-align: center;
       color: #ffeb3b;
        
      }
      .region-display{
        font-size: 130%;
      }
      .regionOptions{
        margin-top: 10%;
          font-size: 120%;
      }
     
      .regionOptions a{
        position: relative;
        display: block;
       color: #f2f2f2;
        text-align: center;
         margin-left: 0; 
       
      }
      a.minimal-link {
        display: inline;
        text-decoration: none;
        border-bottom: 1px solid #ffeb3b; 
        padding-bottom: 2px;
        transition: all 0.2s ease;
      }
   
      /* Menu Icon */
      .hamb{ 
        position: relative;
        cursor: default;
        padding: 40px 20px; 
        grid-column: 4; 
          z-index: 5; /* Set z-index to keep the icon at the top position */
        
        
      }
      /* Style label tag */

      .hamb-line {
        background: white;
        display: block;
        height: 2px;
        position: relative;
        width: 24px; 
      

      }
      /* Style span tag */

      .hamb-line::before,
      .hamb-line::after{
          background: white;
          content: '';
          display: block;
          height: 100%;
          position: absolute;
          /*transition: all .2s ease-out;*/
          width: 100%;
      }
      .hamb-line::before{
          top: 5px;
      }
      .hamb-line::after{
          top: -5px;
      }

      /* Toggle menu icon */
      .side-menu:checked ~ nav{
        max-height: 100vh;
      }
      .side-menu:checked ~ .hamb .hamb-line {
        background: transparent;
      }
      .side-menu:checked ~ .hamb .hamb-line::before {
        transform: rotate(-45deg);
        top:0;
      }
      .side-menu:checked ~ .hamb .hamb-line::after {
        transform: rotate(45deg);
        top:0;
      }

      body:has(.side-menu:checked) {
      overflow: hidden;
      }
      /* Hide logoMobil when side-menu is checked */
        .side-menu:checked ~ .logoDiv {
          display: none;
        }
 
  .circle{
    position: relative;
    transform: translate(px, 3px);
  }

.logoutIconBtn {
  background: none;
  border: none;
  cursor: pointer;
  color: #ff4b4b;
  transition: transform 0.2s ease, color 0.2s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logoutIconBtn:hover {
  transform: scale(1.1);
  color: #ff2a2a;
}

.logoutIconBtn svg {
  width: 32px;  /* ← Größe ändern */
  height: 32px;
}


        
.calendar{
position: relative;
padding: 10px;
max-width: 600px;
background-color: rgba(12, 12, 12, 0.466); /* 0.5 = 50% transparent */
border-radius: 10px;
border-width: 1em;
border: 2px solid #ffeb3b;
color: #F0FFFF;
margin-bottom: 2em;





}

.calendar header{
  position: relative;

  padding: 25px 30px 10px;
    display: grid;
    grid-template-columns: 1fr;
    background-color: #ffeb3b;
    border-radius: 10px;
    margin: 0%;
    color: black;

}
.calendar header p{
  font-size: 120%;
   font-weight: bold;
}
.calendar header .icons{
grid-column: 3/4;

}
.calendar ul{
	display:flex;
	list-style: none;
	flex-wrap: wrap;
	text-align: center;
  margin: 3%;

}

.calendar .weeks li {
	font-weight: 500;

}
.calendar .days li{
	z-index: 1;
	
	margin-top: 25px;
  
}

.days li.circle{
  color: #F0FFFF;
  }
  .days li.circleInactive{
    color:  #5c5b5b;
    
    }
.days li.active{
color: #fff;
}

.days li.active::before{
	/*background: #e94417;*/
  border: 2px solid;
  border-radius: 50%;
  border-color: #e94417;
	
}
.calendar ul li{
	position: relative;
	width: calc(100% /7);
}
.calendar .days li::before{
	position: absolute;
	content: "";
	height: 40px;
	width: 40px;
	top: 50%;
	left: 50%;
	z-index:-1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
li.circle::before {
  border: 2px solid;
  border-radius: 50%;
}

.days li.circle::before{	
  
  border-color: #ffeb3b;
}

li.circleInactive::before {
  border: 2px solid;
  border-radius: 50%;
}

.days li.circleInactive::before{	
 
  border-color: #ffeb3b8c;
}

.inactive{
  color:  #5c5b5b;
	}
.container .main .events{
  grid-column: 2/3;
}
header .chooseItem{
	font-size: 40px;
	font-weight: 500;
	position: relative;
}
.span{
  grid-column: 2/3;
  min-width: 87%;
}
    
.langosIcon{
  max-width: 120px;
}

      .logoDiv{
        display: block;
        position: absolute;
        z-index: 3;
         
        
        
               
       }
       .logoMobil{
        display: block;
        max-width: 130px; 
        margin-top: 10px;
           
       }
       .langoDropdown{
        max-width: 55px; 
        margin-top: 10px;
       }

       .slogan{
        position: relative;
        color: #ffeb3b; 
        font-size: 140%; 
        width: auto;
        height: auto; 
       text-align: center;
     
        
        
       }
       .slogenBeschreibung{
        position: relative;
        
        font-size: 120%;
        text-align: center;
        line-height: 3;
    
        /*margin-left:10%;*/
        
        
        
       }
       .strong{
        font-weight: 50%;
       }

 .dropdownText{
  position: relative;
  grid-row: 1;
  padding: 1em;
  text-align: center;
  font-size: 18px;
 

 }
 

.dropdown-menu span{

  font-size: 110%;

  
}
.dropdownAdmin-item.active {
  color: rgb(255, 235, 59);
  border-bottom: 1px solid rgb(240, 255, 255);
}
.dropdown-item,
.dropdown-item * {
    cursor: pointer !important;
}

.dropdown-item.active {
  display: flex;
  flex-direction: column;   
  align-items: stretch;
  color: rgb(255, 235, 59);
  
}
.line-break {
  margin-bottom: 10%;
 }
 .error{
  position: relative;
  text-align: center;
  margin-bottom: 2em;
 }
 .dropdown-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px; /* Abstand unter dem Text */
}

.dropdown-underline img {
  max-width: 55px;
  height: auto;
}

.dropdown-underline .line {
  flex: 1;
  height: 1px;
  background-color: rgb(240, 255, 255);
 
}

    /*********Langos*********/

.langosAngebot{
   display: grid ; 
  place-items: center;   
  padding: 5%; 
}

.gönnDir{
color: #ffeb3b;
font-size: 1.5em;
text-align: center;

}
.langKur{
grid-row: 2/3;
text-align: center;
color: #F0FFFF;
font-size: 1.2em;
}
.langosGestapelt{
  max-width: 300px;
  grid-row: 3/4;
 
}

.zutaten{
  color: #ffeb3b;
  font-size: 1.5em;
   grid-row: 4/5;
   text-align: center;
   margin-bottom: 10%;
}
.tabelleAngebot{
  margin-bottom: 10%;
  grid-row: 5/6;
 
}
.treue{
   font-size: 1.5em;
   text-align: center;
   color: #ffeb3b;
}
.treuetaler{
  max-width: 300px;
}

.imageTreuetaler{

   margin-top: 10%;

   grid-row: 8/9;
 
}

table {
      border-collapse: collapse;
      border-bottom: 1px solid #ffeb3b;
    }
    th, td {
      position: relative;
      border: none;
      padding: 8px;
      font-size: 1.1em;
 
    }
    th{
       border-bottom: 1px solid #ffeb3b;
       font-size: 1.2em;
      
    }

.langosTreuetaler{
  grid-row: 7/8;
 font-size: 1.1em;
 padding-bottom: 1em;
}


     /******Kontakt**************/



  /******Ueber Uns**************/
.uns_prev,
.uns_next {
  display: none;} 

.hUns{
color: #ffeb3b;
margin: 3em;
font-size: 25px;
}

.slideshow-container {
  width: 100%;
 place-items: center;
  position: relative;
  overflow: hidden;     /* versteckt überlaufende Inhalte */
}
.unterstrichen {
  border-bottom: 1px solid #ffeb3b;
  padding-bottom: 0.3em;
  display: inline-block;
  margin-bottom: 1.5em; /* zusätzlicher Abstand zum Bild */
}

p,
 .Wagen1978Span img,
  .Wagen1984Span img,
  .HolzhütteSpan img,
  .SpeyerSpan img,
  .ShoppegässleSpan img,
  .DMSpan img,
  .EUSpan img,
  .EttlingenWeihnachtsmarktSpan img,
  .KarlsruheWeihnachtsmarktSpan img,
  .HexenhausSpan img,
  .HängerSpan img,
  .WagenJanSpan img {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: block;  
    margin-top: 1em;
   margin-bottom: 1em;

  }


.slide {
  display: flex;              /* alle sichtbar */
  flex-direction: column;
  justify-content: center; /* Text oben, Bild darunter */
  align-items: center;
  text-align: center;
  width: 100%;
  height: auto;               /* Höhe passt sich an Inhalt an */
  padding: 1rem;
  box-sizing: border-box;
  margin-bottom: 2rem;        /* Abstand zwischen Slides */
}

.slide-bild {
  max-width: 160px;             /* Bilder kleiner auf Mobil */
  width: 100%;
  height: auto;
  display: block;
  margin: 0em auto;
}
  .slide.active {
    display: flex;            /* aktuelle Slide sichtbar */
  }
.UweWagen{
   max-width: 300px;

  
}

  .Wagen1978Text{
    margin-top: 0;  
    padding: 1em;
    text-align: center;
  }
  .EU{
    text-align: center;
  }
  

  .Wagen1978Span,
  .Wagen1984Span,
  .HolzhütteSpan,
  .SpeyerSpan,
  .ShoppegässleSpan,
  .DMSpan,
  .EUSpan,
  .EttlingenWeihnachtsmarktSpan,
  .KarlsruheWeihnachtsmarktSpan,
  .HexenhausSpan,
  .HängerSpan,
  .WagenJanSpan,
  .UweWagenSpan {
    display: block;
    
    margin: 0 auto;
  
  }
.Wagen1978Span img {
  vertical-align: bottom; /* oder bottom, je nach Effekt */
}


  .Geschichte {
    padding: 1em;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  margin-top: 0;

  }
   .Wagen1978Block,
  .Wagen1984Block,
  .HolzhütteBlock,
  .SpeyerBlock,
  .ShoppegässleBlock,
  .DMBlock,
  .EUBlock,
  .EttlingenWeihnachtsmarktBlock,
  .KarlsruheWeihnachtsmarktBlock,
  .HexenhausBlock,
  .HängerBlock,
  .UweWagenBlock {
    grid-column: span 2;
    display: grid;
  }

  /* Mobile: Alle sichtbar */ @media (max-width: 1024px) { .Geschichte .slide { display: block !important; } .Geschichte .uns_prev { display: none !important; } .Geschichte .uns_next { display: none !important; } }




/****Kontakt****/




/* E-Mail-Text */


.emailGrün a,
.emailRot a,
.emailGelb a,
.emailGrünJens a{
  font-size: 1.1rem;
  text-align: right;
  border-bottom: 1px solid #ffeb3b;
  text-decoration: none;
}

.emailGelb,
.emailGrün,
.emailGrünJens,
.emailRot {
  margin-top: 8px;   
   
  font-size: 0.9em;
  line-height: 1.6em;
 
  text-align: left;
}

.GruenTreuetaler,
.GelbTreuetaler,
.RotTreuetaler,
.GruenTreuetalerJens{
  display: flex;            /* nebeneinander anordnen */
  align-items: center;      /* vertikal mittig */
  gap: 0.75rem;             /* Abstand zwischen Münze und E-Mail */
  width: 100px;
  height: 100px;
  perspective: 800px;          /* 3D-Tiefe */
  margin-bottom: 3em;
  margin-left: -5em;
  
}

#talergruen,
#talerGelb,
#talerRot,
#talerGrünJens {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* 3D-Objekt */
  animation: drehen 2s linear infinite;
  aspect-ratio: 1 / 1; 
  margin-right: 2em;
}

.seite {
  position: absolute;
  width: 80%;
  height: 80%;
  backface-visibility: hidden;  /* Rückseite ausblenden, wenn hinten */
  background-size: cover;
  border-radius: 50%;           /* Kreis */
}

/* Vorderseite (Bild einfügen) */
.front,
.frontGrün {
  background-image: url('./imagesOptimized/images/TreuetalerGrünVorne.jpeg');
}

/* Rückseite (Bild einfügen) */
.back,
.backGrün {
  background-image: url('./imagesOptimized/images/TreuetalerGrünHinten.jpeg');
  transform: rotateY(180deg);   /* Rückseite umdrehen */
}
.frontGelb {
  background-image: url('./imagesOptimized/images/TreuetalerGelbVorne.jpeg');
}

/* Rückseite (Bild einfügen) */
.backGelb {
  background-image: url('./imagesOptimized/images/TreuetalerGelbHinten.jpeg');
  transform: rotateY(180deg);   /* Rückseite umdrehen */
}

.frontRot {
  background-image: url('./imagesOptimized/images/TreuetalerRotVorne.jpeg');
}

/* Rückseite (Bild einfügen) */
.backRot {
  background-image: url('./imagesOptimized/images/TreuetalerRotHinten.jpeg');
  transform: rotateY(180deg);   /* Rückseite umdrehen */
}

@keyframes drehen {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}




.hKontakt{
  color: #ffeb3b;
   grid-column: 1 / -1; /* oder span 4, wenn 4 Spalten */ 
   text-align: center;
   font-size: 1.5em;
   margin-top: 1.5em;
}
.KontaktText{
  padding: 1em;
   grid-column: 1 / -1; /* oder span 4, wenn 4 Spalten */ 
   text-align: center;
   max-width: 100%;
}
.KontaktText span {
  font-size: 1.3em;  
}


/*****Create and update Events*****/
.regionsAdmin{
 font-size: 1.3em;
 

}

 input[type="radio"] {
  
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  label {
    cursor: pointer;
    user-select: none;
  }

  input[type="radio"]:checked + span {
 
    color:#ffeb3b;
        padding-bottom: 2px;
        transition: all 0.2s ease;
}

/*Admin stuff*/
.zeitraumForm {
  text-align: left;
}

.zeitraumForm label,
.zeitraumForm span,
.zeitraumForm input,
.zeitraumForm button {

  text-align: left;
}
.formContainer{
  grid-column: 1 / -1 !important;
 
}

 /* Modal Styling */
  .modal::backdrop {
    background: rgba(0, 0, 0, 0.5); /* dunkler Hintergrund */
  }

  #confirmModal,
  #confirmDeleteModal {
    border: none;
    border-radius: 1rem;
    padding: 1.5rem;
    width: 90%;       /* fast volle Breite auf Mobil */
    max-width: 400px; /* begrenzt auf Desktop */
    text-align: center;
  }
  #confirmModal ul,
  #confirmDeleteModal ul {
  list-style: none;  /* entfernt die Punkte */
  padding: 0;        /* entfernt Einrückung */
  margin: 0;         /* optional: Abstand oben/unten entfernen */
}

  .udBtn,
  .cancel
  
   {
    padding: 0.5em 1em;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    background-color: #f44336; color: white;
  }

  .saveBtn,
   .delBtn{
    padding: 0.5em 1em;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    background-color: #4CAF50; color: white;
  }
  .create-btn{
 padding: 0.5em 1em;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    width: 2em;
    grid-column: 1/5;
    

  }




@media (max-width: 767px) {

  .container .main {
    display: grid;
    grid-template-columns: 1fr; /* alles untereinander */
    grid-auto-rows: auto;
    justify-items: center;       /* Inhalte horizontal zentrieren */
    text-align: center;       
  }

  .calendar,
  .inputEvents,
  .regionsAdmin,
  .hAdmin {
    grid-column: 1 / -1 !important;
    width: 90% !important;      /* etwas kleiner als 100%, wirkt harmonischer */
    margin: 0 auto 1em auto;    /* Abstand und zentriert */
  }

.calendar {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 20px auto;
    margin-bottom: 3em;
  }

  .inputEvents {
    width: 90% !important;
    margin: 0 auto 1em auto; 
  margin-top: 3em  !important;
  }
.regionsAdmin {
    display: flex;                 /* Flexbox benutzen */
    flex-direction: column;        /* alles untereinander */
    align-items: center;           /* horizontal mittig */
    justify-content: center;       /* vertikal mittig (falls nötig) */
    width: 100% !important;        /* volle Breite nutzen */
    margin: 0 auto 1em auto !important;
    text-align: center !important;
  }


  
}



 





@media (min-width: 769px) and (max-width: 1024px) {
  .footer.footer{
    max-height: 200px;
    text-align: center;
  }
  .formContainer {
    display: flex;              /* Flexbox aktivieren */
    flex-direction: column;     /* Inhalte untereinander */
    align-items: center;        /* horizontal zentrieren */
    width: 100%;                /* volle Breite */
    margin: 0 auto;             /* Container mittig */
  }

  .formContainer > div,
  .formContainer > form {
    width: 90%;                 /* einheitliche Breite */
    margin-bottom: 1em;         /* Abstand zwischen Elementen */
    text-align: center;         /* Inhalte mittig */
  }
}
.inputEvents {

  align-self: center !important;
  margin-top: 2em !important;
  
  
}
.eventname {
  display: block;      /* sorgt dafür, dass der Text über dem Input steht */
  text-align: left;    /* links ausrichten */
  margin-bottom: 5px;
  font-size: 1.2em;  /* etwas Abstand zum Feld */
   border-bottom: 1px solid #F0E801;
   padding-bottom: 2px;
    display: inline-block;   /* nur so breit wie der Text */

}

.eventTemp
{
    border-bottom: 1px solid #F0E801;
    font-size: 1.2em; 
    padding-bottom: 2px;
    display: inline-block;   /* nur so breit wie der Text */

}
.weekmarket {
    border-bottom: 1px solid #F0E801;
    font-size: 1.2em; 
    padding-bottom: 4px;
    display: inline-flex;     /* Flexbox, aber nur so breit wie der Inhalt */
    align-items: center;
    gap: 2em;               /* Abstand zwischen Text und Checkbox */
}
.preview{
  margin-top: 2em;
}
 #confirmModal,
 #confirmDeleteModal {
      width: 400px; /* feste Breite auf Desktop */
      grid-column: 2;
    }
    dialog.modal {
  border: none;
  border-radius: 1rem;
  padding: 1.5rem;
  width: 90%;
  max-width: 400px;
  text-align: center;

  /* Zentrierung */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

dialog.modal::backdrop {
  background: rgba(0,0,0,0.5);
}

  .slide-bild {
    max-width: 190px;         /* Bildgröße für Desktop */
    margin-top: 2rem;
  }

  .uns_prev,
  .uns_next {
    display: block;           /* Navigation nur auf Desktop */
  }



   


@media (min-width: 1025px) {



.container .header {
 
  display: grid;
  grid-area: header;
  grid-template-columns: 1fr auto 1fr; /* zentriert mittlere Spalte */
  position: sticky;
  top: 0%;
  width: 100%;
  min-height: 100px; /* oder was zu deinem Layout passt */
  padding: 2rem;
  

}

.impressumInhalt{
  display: grid;
  
 place-items: center;
}
 footer.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  color: white;
  padding: 2rem 1rem;
 
}

/* Impressum */
footer.footer .impressum {
 
  width: 100%;
 
  margin-bottom: 1rem;
}

footer.footer .impressum .title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}


/* Social Media Icons */
footer.footer .social-media {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
}

footer.footer .social-icon {
  width: 28px;
  height: 28px;
  color: white;
  transition: color 0.3s ease;
}

footer.footer .social-icon:hover {
  color: #aaa;
}

/* Copyright */
footer.footer .rechte-vorbehalten {
  font-size: 0.9rem;
}

 

.container .header .nav {
  grid-column: 1/4; /* ← mittlere Spalte */
 display: grid; /* ← zentriert horizontal */
  place-items: center;
}


.nav{
   display: block;
  position: relative;
  max-height: none;        /* <<< Wichtig! */
  overflow: visible;       /* <<< Wichtig! */
  inset: auto;             /* inset zurücksetzen */
  height: auto;
  width: 100%;
  z-index: 4;   
          /* niedriger als Header-Inhalte */
  grid-row: 1/2; 

}
.hamb, .side-menu {
    display: none; /* <--- wichtig, um es sicher auszublenden */
  }

.menu{
/*position: relative;
margin-left: auto;
grid-column: 2/4;*/
 justify-self: center;
}
.menu .home{

 grid-row: 1/2;
 

}
.menu .events{

 grid-row: 1/2;

}
.menu .langos{

 grid-row: 1/2;
 
}
.menu .logo{
  display: block;
  position: relative;
  z-index: 3;
   grid-row: 1/2;
  
 }
 .logoImg{
    position: relative;
   max-width: 200px;
   height: auto;
  margin-top: -80px;
    z-index: 3;
  grid-row: 1/2;
  
 
 }

.menu .uns {
  grid-column: 6;
   grid-row: 1/2;
  
}

.menu .kontakt{
  grid-column: 8;
   grid-row: 1/2;
  
}
.logoMobil{
  display: none;
}

/***Home***/
.mainContainer{
 
  display: grid;
  place-items: center;

}
.slogan{
  position: relative;
 

  margin-bottom: 5%;
  font-size: 160%;
  
 }
 .slogenBeschreibung{
  position: relative;


  left: 0%;
  font-size: 120%;
    margin-bottom: 5%;
 }
.region-select {
  position: relative;
  width: 300px;
  display: block;
  


}


.regionOptions {
  position: relative;
 color: #F0FFFF;
  right: 0;
  z-index: 10; 
  display: block;

  top: 20%;
 
}

/**Events***/

header .icons span:hover{
  background: #f2f2f2

}




 .events {
  
  display: grid;
  
 }
 .eventDescription{
  position: relative;
  top: 5%;
 }
 .eventHeadingTop{
  position: relative;
  left: 22%;
  font-size: 20px;
 }
 .eventHeadingBottom{
  position: relative;
  left: 20%;
  font-size: 20px;
  
 }
 .eventInformation{
  position: relative;
  left: 10%;
 }
 /*.line{
  position: relative;
  border-bottom: solid;
  color: black;
  width: 60%;
  left: 15%;
 }/*




/*Ueber Uns*/

.slideshow-container {
  position: relative;
  max-width: 800px;
  border-radius: 10px;
  color: white;

 
}

.slide {
  display: none;
   justify-content: center;
    align-items: center;
    text-align: center;
    height: 80vh;
  
}
 .slide.active {
    display: flex;
  }

.slide img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  margin-bottom: 1em;
}
  .slide-bild {
    max-width: 200px;
  }



.uns_prev,
.uns_next {
  cursor: pointer;
  position: absolute;
  display: block;
  width: auto;
 
  color: white;
  font-weight: bold;
  font-size: 2em;
  user-select: none;
  
  border-radius: 0.3em;
  transform: translateY(-50%);
}

.uns_prev {
  left: 10px;
  top: 70%;
 
}

.uns_next {
  right: 10px;
    top: 70%
}
.dropdown-underline .line{
  background-color: rgb(240, 255, 255);

}

/*Admin*/

.formContainer {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* links - mitte - rechts */
  gap: 20px; /* Abstand zwischen den Spalten */
  width: 80%;
  margin: 0 auto; /* Container mittig */
  align-items: start; /* Inhalte oben ausrichten */
}
.inputEvents,
.calendar,
.period {
  align-self: start; /* sorgt dafür, dass alle oben bündig sind */
}
.calendar{
  min-width: 550px;
  min-height: 550px
}




.hUns{
  position: relative;
  color: #ffeb3b;
  text-align: center;
  font-size: 30px;
  margin-bottom: 2em;
 

}

  .Geschichte {
  padding: 1em;
  display: grid;
  margin-top: 0;
  }
  .unterstrichen{
  border-bottom: 1px solid #ffeb3b; 
  padding-bottom: 2em;
  display: inline-block;
  text-align: center;
  grid-column: 2/3 ;
}
 .Wagen1978Text{
    margin-top: 0; 
    margin-bottom: 3em; 
   text-align:inherit;
    font-size: 1.1em;
  }
  .Wagen1978Block,
  .Wagen1984Block,
  .HolzhütteBlock,
  .SpeyerBlock,
  .ShoppegässleBlock,
  .DMBlock,
  .EUBlock,
  .EttlingenWeihnachtsmarktBlock,
  .KarlsruheWeihnachtsmarktBlock,
  .HexenhausBlock,
  .HängerBlock {
    display: grid;
    grid-template-columns: 1fr ;
    grid-template-rows: auto auto; /* Text oben, Bild unten */
      text-align: center; /* <-- vertikal mittig ausrichten */
     gap: 1em;
     margin-bottom: 2em;
  }


 .Wagen1978Span img,
  .Wagen1984Span img,
  .HolzhütteSpan img,
  .SpeyerSpan img,
  .ShoppegässleSpan img,
  .DMSpan img,
  .EUSpan img,
  .EttlingenWeihnachtsmarktSpan img,
  .KarlsruheWeihnachtsmarktSpan img,
  .HexenhausSpan img,
  .HängerSpan img,
  .UweWagen img {
   
    max-width: 700px;
    height: auto;
    margin: 0 auto;
    display: block;  
  

  }

  .ersterWagen,
  .Wagen1984,
  .Holzhütte,
  .Speyer,
  .Shoppegässle,
  .DM,
  .EU,
  .EttlingenWeihnachtsmarkt,
  .KarlsruheWeihnachtsmarkt,
  .Hexenhaus,
  .Hänger,
  .UweWagen {
  margin: 0em auto;
  max-width: 700px;
 font-size: 15px;
  text-align: center;
  }

  .Wagen1978Span,
  .Wagen1984Span,
  .HolzhütteSpan,
  .SpeyerSpan,
  .ShoppegässleSpan,
  .DMSpan,
  .EUSpan,
  .EttlingenWeihnachtsmarktSpan,
  .KarlsruheWeihnachtsmarktSpan,
  .HexenhausSpan,
  .HängerSpan,
  .UweWagenSpan {
   display: block;
  text-align: center;
  grid-column: 1 / -1;
  margin: 0 auto;
  
 

  
  }



/********Langos********/

.langosTreuetaler{
 grid-column: 1 / -1; /* oder span 4, wenn 4 Spalten */
  text-align: center;
  margin-bottom: 1rem;
}

}
 /*AdminStuff*/


 .regionsAdmin{
 font-size: 1.3em;
  margin-top: 0.5em;
  grid-column: 1/5;
  text-align: center;


}

.hAdmin{
  grid-column: 1/5;
  color: #ffeb3b;
margin-top: 2em;
margin-bottom: 2em;

font-size: 25px;
  width: 100%;
  text-align: center;
}