body{

 

margin: 0px;
padding: 0px;
background-color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}


.grid-container {

    display: grid;
    
    grid-template-columns: 2fr 1fr  ;
    grid-template-rows: 1fr 1fr 0.2fr  ;
    gap: 0.1em;
    justify-content: flex-start;
    
}



.item {

    padding: 1em;
    background-color: #f5edf4;
    color: black;
    text-align: left;
    border-radius: 8px;
    font-size: 1 rem;
    
    justify-content: flex-start;

   
    
    
}


h1 {
    font-size: 18px ;
    margin: 3%;
}

@media screen and (min-width: 620px) {
    h1 {
    font-size: 30px ;
}
    
}

ul {
    font-size: 16px ;
    margin: 3%;
    font-style: italic;
    font-weight: 600;
    
}

.hell {
    font-size: 16px ;
    margin: 3%;
    font-style: italic;
    font-weight: 300;
    
}

p {
    font-size: 16px ;
    margin: 3%;
    font-style: ;
    font-weight: 300;
    color: black;
    padding: 5x;
}

.bold {
    font-size: 16px ;
    margin: 3%;
    font-style: italic;
    font-weight: 600;
    color: black;
    padding: 5x;
}


.bold1 {
    display: flex;
align-items: center;
justify-content: center;
    font-size: 16px ;
    margin: 0%;
    font-style: italic;
    font-weight: 600;
    color: black;
    padding: 5px;
    border-color: black;
    width: 100%;
    
    background-color: lightgreen;
}

.bold10 {
    display: flex;
align-items: center;
justify-content: center;
    font-size: 16px ;
    margin: 0%;
    font-style: solid;
    font-weight: 600;
    color: black;
    padding: 5px;
    border-color: black;
    width: 100%;
    
    background-color: lightgreen;
}





header{

    background-color: white;
    margin: 0px;
    padding: 10px;
}

.mitte {
display: flex;
justify-content: center;
align-items: center;
color: blue;
 





    }

    #teaser {
width: 100% ;
height: auto;
    }

    #teaser img {

        width: 100% ;
        height: 100% ;
        object-fit: cover;

    }

    @media screen and (min-width: 800px) {

        #teaser {

             width: 100% ;
                   height: 200px;
    }
        
    }


       footer ul, nav ul {

        list-style: none;
        margin: 0px;
        padding: 0px;
        padding-top: 24px;
        padding-bottom:24px;
    }

    footer  nav ul li a,  nav ul li a  {

        padding: 16px;
        font-weight: 600;
        text-decoration: none;
        
    }

    a:hover {
  color: lightseagreen;
  text-decoration: underline;
}


    section {

max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 16px ;
padding-right: 16px ;


    }


    nav {

position: sticky;
top: 0px;
backdrop-filter: blur(8px);

    }

    h2  {

font-size: 8opx;
color: black;
margin:4px ;
padding:px;

}


    .box {

        display: flex;
justify-content: center;
align-items: center;


      color: black
      ;

      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 18px;
   font-style: italic;
   font-family: initial;
   padding: 2%;
    
     
background-color: white;
    
font-size: 18px;

margin: 0%;

margin-bottom:0% ;
 margin-top: 0%;
 margin-right:5% ;
margin-left: 5%;

padding-top:5% ;
 padding-bottom:5% ;
 
 padding-right:3% ;

padding-left: 3%;
  margin-right: 0%;
  margin-left: 10%;
  
   margin-top: 8%;

    height:40px ;
    width: 600px
    ;

    box-shadow: 0px 5px 16px 8px #000000;
    
    border-radius: 18px;

 }

 .butt {

    display: flex;
justify-content: center;
align-items: center;


     }


     .container {
  display: flex;                /* Flexbox aktivieren */
  justify-content: center;      /* Horizontal zentrieren */
  align-items: center;          /* Vertikal zentrieren */
  height: 100%; 
     border-radius: 0px;  
     border-color: 1px; 
     border: 5px; 
     background-color: white;        /* Beispiel: Höhe des Viewports */
}

button {

     background-color: yellowgreen;  
   
      border-radius: 10px; 
      font-size: 16px;

margin: 0%;

margin-bottom:1% ;
 margin-top: 0%;
 margin-right:;
margin-left: ;

padding-top: ;
 padding-bottom: ;
 
 padding-right:% ;

padding-left: %;
  margin-right: 0%;
  margin-left: %;
  
   margin-top: %;

    height:100px ;
    width: 500px


    }

    h2  {

font-size: 8opx;
color: black;
margin:4px ;
padding:px;

}

h4  {

font-size: 8opx;
color: red;
margin:4px ;
padding:px;

}

section {
margin:2px ;
padding:0px;
background-color: white;  

}

table {
padding:0px;
background-color: white; 
margin-left: 24px; 

}

hr.new1 {
     width: 100%;
  border: 0.5px solid orange;
  border-radius: 0px;
  margin-left: 15px; 
}

.heidi {
      display: flex;                /* Flexbox aktivieren */
  justify-content: center;      /* Horizontal zentrieren */
  align-items: center;          /* Vertikal zentrieren */
  height: 100%; 
  margin-top: 1rem;
  
}


.pics {
      display: flex;                /* Flexbox aktivieren */
  justify-content: center;      /* Horizontal zentrieren */
  align-items: center;          /* Vertikal zentrieren */
  height: 100%; 
  margin-top: 1rem;
  
}

.counter {
      display: flex;                /* Flexbox aktivieren */
 
  justify-content: flex-end;      /* Horizontal zentrieren */
  align-items: center;          /* Vertikal zentrieren */
  height: 100%; 
  margin-top: 1rem;
   margin-right:10rem;
  color: blue;
}




.img-small {width: 150px; height: auto;}



.img-medium {width: 200px; height: auto;

 margin-right:0px;

  margin-left:0px;

  padding:10px;
}



.img-large {width: 100px; height: auto;

margin-top: 0px; padding:100px;
}


 * { box-sizing: border-box; }
  body { margin: 0; padding: 0; font-family: sans-serif; }

  .main-wrapper {
    width: 90%; /* 10% Rand auf Handys */
    max-width: 1140px; /* Standard-Desktop-Breite */
    margin: 0 auto; /* Zentrierung */
    background-color: white;
    padding: 20px;
  }