/* poweranimal.de */


  body{

 

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

}

.links{
    width: 100%;

    background-color: white;
}



  

.bildtiere { width: 60%; 

    max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
  border-radius:5% 5% ;
  padding-left: 10px;

}


.bildperson { width: 50%; 

    max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
  border-radius:5% 5% 5% 5% ;
  padding-left: 10px;

}

.bildpersonen { width: 30%; 

    max-inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  object-position: top center;
  border-radius:5% 5% 5% 5% ;
  padding-left: 10px;

}

.bildtiere { width: 60%; 

    max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
  border-radius:5% 5% ;
  padding-left: 10px;

}

.buch { 

    max-inline-size: 60%;
  block-size: auto;
  object-fit: cover;
  object-position: top center;
  border-radius:0% 0% ;
  padding-left: 10px;
  padding-top: 20px;

}

.btn{

margin-bottom: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: lightcyan;
border-radius: 10px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-style: italic;
font-size: 16px;
text-align: center;

}

.btn1{
    display: flex;
    justify-content: center;
    align-items: center;
margin-bottom: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color:lightgreen;
border-radius: 10px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-style: italic;
font-size: 16px;
text-align: center;
padding: 30px;
margin-left:30px ;

}


.centrum{

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;

}



button {

     background-color: #9fff80;  
   
      border-radius: 10px; 
      font-size: 16px;

margin: 0%;

margin-bottom:3% ;

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

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

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

    height:2.2rem ;
    width: 10%;


    }


    .hinweis {
        display: flex;
        justify-content: center;
        align-items: center;

     background-color: #9fff80;  
   
      border-radius: 10px; 
      font-size: 16px;

margin: 0px;

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

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

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

    height:100px ;
    width: 500px;


    }

   

 

   /* poweranimal.de */


.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;
}




.center{

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

    background-color: white;

}


.center-text{

 display: flex;
    justify-content: center;
    align-items: center;
 font-style: italic;
     padding: 1.0rem;
      font-size: 16px ;
      color: blue;
      margin-top: 30px;

}

.autor{

    display: flex;
    justify-content: center;
    align-items: center;
 color: blue;
    background-color: white;


}


.mittig {
    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: ;
}

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





header{

    display: flex;
align-items: center;
    justify-content: flex-start;
    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 */
}

 .container1 {
  
display: flex;                /* Flexbox aktivieren */
  justify-content: center;      /* Horizontal zentrieren */
  align-items: center;   
   font-size: 24px;       /* Vertikal zentrieren */
  height: 100%; 
  text-align: center;
     border-radius: 0px;  
     border-color: 1px; 
     border: 5px; 
     background-color: white; 
     color: blue; 
     font-family: 'Times New Roman', Times, serif; 
     font-style: italic;
       
     /* Beispiel: Höhe des Viewports */
}



    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 lightseagreen;
  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;
  }