/* Umbrüche Breite:
    1224px
     960px

*/











body {
    /*background-image: url('../bilder/lotzwil_schafweidli_2018_03.jpg');*/
    background-image: url('../bilder/IMG_20240809_191237_klein.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 2400px;
    margin: 0px;
    
    
    
  }
  
.container{
    width: 800px; 
    margin-left: auto;
    margin-right: auto;
    /*border: white solid 3px;*/
   
   
   
} 

      




a{
    text-decoration: none;
} 

.titel.old{
    height: 100px;
    width: 798px;
    margin-left: auto;
    margin-right: auto;
    /*border: black solid 2px;*/


} 

.titel.old img {
    display: inline;
    position: relative;
    height: 55px;
    width: 400px;
    margin-top: 10px;
} 
.wappen {
    display: inline-block;
    width: 140px;
} 
.wappen img{
    display: inline-block;
    width: 115px;
    height: 111px;
    margin-top: 0px;
} 
.titeltext {
    margin-top: 14px;
    margin-left: 28px;
    display: inline-block;
    position:absolute ;
    font-size: 58px;
    width: 625px;
} 


.wetter iframe {
    width: 100%;
    height: 120px;
    margin-bottom: 20px;
} 

.hauptteil{
    display: inline-flex; 
    width: 100%;
    background-color: rgb(225, 225, 225);
    
    padding-top: 20px;
    padding-bottom: 10px;
} 
.message{
    display: inline;
    position: relative;
    width: 80%;
    padding-top: 5px;
    padding-bottom: 17px;
} 
.message img{
    display: block;
    width: 70%;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
} 

.menu{
    display: block;
    position:absolute;
    right: 1px;
    width: 20%; 
    border-bottom: blue solid 10px;
    padding-left: auto;
} 
.inhaltsverzeichnis{
    display: block;
    margin-right: 10px;
    margin-left: 10px;
    /*padding-left: 10px;*/
    
    width: 150px;
    /*height: 30px; */
    border-bottom: blue solid 1px;
} 
a p {
    padding-left: 5px;
} 

.aktuell{
    width: 80%;
    background-color: rgb(225, 225, 225);
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 20px;
    margin-bottom: 40px;
} 





p.adresse {
    margin-top: 8px;
    margin-bottom: 8px;
} 



.adresse_text {
    line-height: 1.3rem;
} 



/* ------------------------------------------------------------------------------------*/
html { 

    @media (max-width:1224px) {
        .container{
            width: 700px;
        } 
        .titeltext {
            margin-top: 19px;
            margin-left: 15px;
            font-size: 52px;
            width: 554px;
        } 
    }                                                             
    @media (max-width:960px){
        .container{
            width: 600px;
        }
        .titeltext {
            margin-top: 24px;
            margin-left: 26x;
            font-size: 37px;
            width: 470px;
        } 
        .message img{
            padding-top: 30px;
            
            
        } 
    } 
     
    @media (max-width:640px){
        .container{
            width: 455px;
        }
        .titeltext {
            margin-top: 35px;
            margin-left: -8px;
            font-size: 27px;
            width: 332px;
        } 
        .hauptteil{
            padding-top: 10px;
            padding-bottom: 5px;
        }   
        .message img{
            padding-top: 70px;
            
            
        } 
        .message .aktuell h1{
            font-size: 1.4em;
        }  
         
    } 
   
    @media (max-width:500px){
        .container{
            width: 340px;
        }
        .titeltext {
            margin-top: 38px;
            margin-left:1px;
            font-size: 20px;
            width: 200px;
        } 
        .hauptteil{
            padding-top: 10px;
            padding-bottom: 5px;
        }   
        .message img{
            padding-top: 70px;
            
            
        } 
        .message .aktuell h1{
            font-size: 1.1em;
        }  
        body{
            height: 2600px;
        }   
         
    }
    
    @media (max-width:400px){
        .container{
            width: 290px;  
        }
        .titeltext {
            margin-top: 38px;
            margin-left: 10px;
            font-size: 18px;
            width: 170px;
        } 
        .hauptteil{
            padding-top: 10px;
            padding-bottom: 5px;
        }   
        .message img{
            padding-top: 70px;
            
            
        }
        .message .aktuell h1{
            font-size: 0.81em;
        }
        body{
            height: 2800px;
        }   
         
    } 
   
}



/* --------------------------------------------------------------------------------------*/

.slide {
    display:block;
  width: 100%;
  /*height: auto;*/
  aspect-ratio: 16 / 9; 
  object-position: center;
  object-fit: cover; /* Verhindert Verzerrungen */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* Schiebt das Bild exakt um die Hälfte seiner Breite zurück */
  opacity: 0;
  z-index: 1; /* Alle unsichtbaren Bilder liegen unten */
  /* Steuert, wie sanft das Ein-/Ausblenden ist (1.4 Sekunden) */
  transition: opacity 1.4s ease-in-out; 

  margin-left: auto;
  margin-right: auto;
}

/* Nur das Bild mit der Klasse .active ist sichtbar */
.slide.active {
  opacity: 1;
  z-index: 2; /* Das aktive Bild liegt immer über den anderen */
}



/* Zeitverzögerung für den Start der Animation */
/*
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 3.6s; }
.slide:nth-child(3) { animation-delay: 7.2s; }
.slide:nth-child(4) { animation-delay: 10.8s; }
.slide:nth-child(5) { animation-delay: 14.4s; }
.slide:nth-child(6) { animation-delay: 18s; }
.slide:nth-child(7) { animation-delay: 21.6s; }

@keyframes slideShow {
  0% { opacity: 0; }
  4% { opacity: 1; }    /* Sanftes Einblenden 
  14.28% { opacity: 1; }   /* Sichtbar bis 10 Sek (33% von 30s) 
  18.28% { opacity: 0; }   /* Sanftes Ausblenden 
  100% { opacity: 0; }
}
  */





/*

.body{
    background-attachment: fixed;
    height: 100%;
    min-height: 100%;
    background-image: url(./lotzwil_schafweidli_2018_03.jpg);
    background-position: left, center;
    background-size: auto;
    background-repeat:space ;
    
    
    height: 800px;
    position: relative;
    
} 
    */