/* Style Eigenschaften kompletter body */

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 

 body {
     font-family: 'Open Sans', sans-serif;
     background-color: rgb(230, 230, 230);
     padding-top: 5px;
     color: rgb(22, 22, 22);
   
 }
 /*einrücken der breiten listen-elente im Textteil*/
 
 .einruecken {
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 40px;
 }
 /* Style Eigenschaften aria-current link (farbe nach Adobe Color gewählt)*/
 
 #red {
     color:#FC5205;
     font-weight: 800;
 }
 /* Style Eigenschaften alle link */
 
 a {
     color: rgb(247, 247, 247);
     text-decoration: none;
     margin-left: 10px;
     margin-right:10px;
     font-weight: 500;
 }
 
 a:hover {
     font-weight: 800;
 }
 
 a:visited {
     color: rgb(247, 247, 247);
     margin-left: 16px;
     font-weight: 500;
 }


 
 /* Style Eigenschaften Schrift-Elemente */
 
 #white{
    color: rgb(247, 247, 247);
 }

 #black {
     color: rgb(22, 22, 22);
 }
 
 .fett {
     font-weight: 600;
 }
 
 h1 {
     color: #00436B;
 }
 
 .abstand {
     margin-right: 10px;
 }
 
 .abstand-left {
     margin-left: 10px;
 }
 
 .abstand-gross {
     margin-left:auto;
 }

.rechts{
   text-align: end;
}
   /* Style textblock restliche Seiten*/
 .textblock {
    background-color: rgb(247, 247, 247);
    padding-left: 90px;
    padding-right: 90px;
    padding-bottom: 50px;
 }
  /* Style textblock index*/
 .textblock-center {
    background-color: rgb(247, 247, 247);
    text-align: center;
    padding-bottom: 50px;
}
 /* Style Eigenschaften Header und logo*/
 
 .logo {
    width: 60px;
    margin-left: 5px;
    
    }
   
    
 
.head {
   
    padding-bottom: 5px;
    text-align: center;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
       
     
 }
 
 /* Style Eigenschaften Navibar */
 
 .navbar {
     min-height: 60px;
     z-index: 150;
     background-color: #00446b;
     display: flex;
     justify-content: stretch;
     align-items: center;
     position: sticky;
     top: 0;
 }
 /* Style Eigenschaften Listen */
 
 ul {
     list-style: none;
     
 }
 li {
    list-style: none;
 }

 /* Style Eigenschaften Nach oben Knopf blog Seite */
 
 .nach_oben {
     color: rgb(247, 247, 247);
     padding: 5px;
     border-radius: 6px;
     background-color: #00446be0;
     align-items: center;
     position: fixed;
     top: 550px;
 }
 /* Style Eigenschaften kennenlernen Start-Seite */

.kennenlernen{
    color: rgb(247, 247, 247);
    padding: 2%;
    width:fit-content;
    border-radius:25px;
    margin-left: 70%;
    background-color: #fc5305d0;
    text-align: center;
    position:relative;
    top: -150px;
    display:flex;
    justify-content:space-evenly;
    z-index: 100;
}
 /* Style Eigenschaften Zusammenfassung blog Seite */
 
 summary{
    animation-delay: 20ms;
 }
 
 summary:focus {
     outline:none;
 }
 
 summary:hover {
     font-weight: 900;
 }

 
 /* Style Eigenschaften Bild Startseite index */
 
 .header-image {
     width: 100%;
     display: block;
     object-fit: scale-down;
     animation: filter-animation 4s ease-in;
  }
  
  @keyframes filter-animation {
    0% {
        filter: grayscale(10);
    }
  
    50% {
      filter: grayscale(5);
    }
  
    100% {
      filter: grayscale(0);
    }
   
   
 }


 .flagge {
    width: 30px;
    display: block;
    object-fit: scale-down;
   
}
 /* Style Eigenschaften Abschlussleiste */
 
 footer {
     min-height: 40px;
     background-color: #00436B;
     color: rgb(247, 247, 247);
     display: flex;
     justify-content: stretch;
     align-items: center;
    
 }

 
 .blog-image {
    width: 100%;
    display: block;
    object-fit: scale-down;
    
 }