body {
    padding : 0 ;
    margin: 0 ;
    margin-top: 30px;
    background:rgb(36, 36, 36);
    overflow-x: hidden;
 }

 body>#footer {
   position:fixed;
 }
.mitte {
    display: flex;
    justify-content: center;
    align-items: center;
 }

.spacer10 {
   height: 10px;
 }
.spacer20 {
   height: 10px;
 }
.spacer30 {
   height: 30px;
 }
.spacer40 {
   height: 40px;
 }
.spacer50 {
    height: 50px;
 }
 

 header {
    position: relative;
    width: 100%;
    height: 3px; 
    background-color: rgb (36, 36, 36);
    display: flex;
    justify-content: center ;
    align-items: center ;
    
    color: #333;
    top: -15; 
    left: 0;
    z-index: 1000;
 }

header a {
    text-decoration: none; 
    color:#333; 
    font-weight: bold;
    font-size: 25px;
    transition: color 0.3s; 
    
 }
 .header-content {
    text-align: center;
}


header a:hover {
    color: green; 
 }

 .header-container {
    position: relative;
    width: 100%;
    height: 90%; 
    background: url("Pictures/Main/BackNew.png") no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
 }


.header-container a {
    display: flex;
    justify-content: center;
    align-items: center;
 }

.header-container img {
    width: 70%; 
 }
 
 .image-section {
   display: flex;
   justify-content: center;
   align-items: center;     
   height: 100vh;          
   background-color: transparent
 }
 .search-form {
   display: flex;
   align-items: center;
}

.search-form input {
   padding: 5px;
   border: none;
   border-radius: 3px;
}

.search-form button {
   background-color: #555;
   color: white;
   border: none;
   padding: 5px 10px;
   cursor: pointer;
   border-radius: 3px;
}

.search-form button:hover {
   background-color: #777;
}

.search-form button:hover {
   background-color: #777;
}

.search-results {
   position: absolute;
   top: 50px;
   right: 20px;
   background: white;
   width: 200px;
   border: 1px solid #ddd;
   display: none;
}

.search-results ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.search-results li {
   padding: 10px;
   border-bottom: 1px solid #ddd;
   cursor: pointer;
}

.search-results li:hover {
   background: #f0f0f0;
}

 .image-section img {
   max-width: 90%;  
   height: auto;     
   max-height: 100vh; 
 }

 nav {
    width: 100%;
    background-color: #333;
    padding: 10px 0;
    text-align: center;
    position: relative;
    top: 10px;
 }
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
 }
 nav.sticky {
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 999;
 }
nav ul li {
    display: inline;
 }
nav ul li a {
    text-decoration: none;
    color: white; 
    font-size: 20px;
    font-weight: bold;
    padding: 10px 15px;
    transition: color 0.3s; 
 }
 nav ul li a:hover {
    color: green;
 }

 .text-section {
   display: flex;          
   justify-content: space-between; 
   padding: 20px;           
 }
 
 .column {
   flex: 1;                 
   margin: 0 20px;          
 }
  
 .column p {
   font-size: 1em;
   line-height: 1.6;
   color:white;
 }

 .content {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
 }

.content h2 {
    font-size: 28px;
    color: #333;
 }

.content p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
 }

.trenner {
    width: 90%;
    height: 4px; 
    background: linear-gradient(to right, transparent, green, transparent);
    margin: 20px auto;
 }
.divider {
   width: 4px;
   height: 100%; 
   min-height: 500px; 
   background: linear-gradient(to bottom, transparent, green, transparent);
 }
 
 .dividerContact {
   width: 4px;
   height: 100%; 
   min-height: 150px; 
   background: linear-gradient(to bottom, transparent, green, transparent);
 }

.überschriftS {
   color: green;       
   font-size: 20px;    
   font-style: italic;  
   text-align: center; 
   margin: 10px 0;  
}
.überschriftK {
   color: green;       
   font-size: 30px;    
   font-style: italic;   
   margin: 10px 0;  
}
.überschriftKW {
   color: white;       
   font-size: 30px;    
   font-style: italic;   
   margin: 10px 0;  
}

.überschriftSW {
   color:white;       
   font-size: 20px;    
   font-style: italic;  
   text-align: center; 
   margin: 10px 0; 
}
.überschriftSW a {
   color:white;       
   font-size: 20px;    
   font-style: italic;  
   text-align: center; 
   margin: 10px 0; 
}
.überschriftSW a:hover {
   color:green;        
}

.überschriftSW p {
   color:white;       
   font-size: 20px;    
   font-style: italic;  
   text-align: center; 
   margin: 10px 0; 
}
.überschriftSW p:hover {
   color:green;        
}

.überschriftSW h2 {
   color:white;       
   font-size: 20px;    
   font-style: italic;  
   text-align: center; 
   margin: 10px 0; 
}
.überschriftSW h2:hover {
   color:green;        
}

 .überschriftM {
   color: green;       
   font-size: 25px;    
   font-weight: bold;  
   text-align: center; 
   margin: 15px 0;  
 }
 .überschriftMW {
   color: white;    
   font-size: 25px;     
   text-align: center; 
   margin: 15px 0;  
 }

 .überschriftMW h2 {
   text-decoration: none; 
   color: white; 
   transition: color 0.3s;
 }

 .überschriftMW a {
   text-decoration: none; 
   color: rgb(255, 255, 255); 
   transition: color 0.3s;
   
 }

.überschriftG {
    color: green;       
    font-size: 35px;    
    font-weight: bold;  
    text-align: center; 
    margin: 20px 0;       
 } 
 .überschriftG a {
   text-decoration: none; 
   color: green; 
   transition: color 0.3s; 
 }
 .überschriftG p {
   text-decoration: none; 
   color: green; 
   transition: color 0.3s; 
 }
 .überschriftG  h2{
   text-decoration: none; 
   color: green; 
   transition: color 0.3s; 
 }
 .zentrierte-section {
    width: 60%;          
    margin: 20px auto;   
    text-align: center;  
    font-size: 20px;    
    line-height: 1.5;   
    color: white;
 }

 
 .image-text-section {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1%;
   padding: 1%;
 }

 

 .image-container img {
   width: 100%; 
   max-width: 400px; 
   border-radius: 10px; 
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 .image-containerM img {
   width: 75%; 
   border-radius: 10px; 
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 .image-containerG img {
   width: 75%;  
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   display: block;
   margin: 0 auto;
}

 .text-container {
   max-width: 40%;
 }

 .text-container h2 {
   font-size: 1.8em;
   margin-bottom: 10px;
   
 }
 
 
 .text-container p {
   font-size: 1.2em;
   color: white;
   line-height: 1.6;
 }
 
 .text-container a {
   font-size: 1.2em;
   color: white;
   line-height: 1.6;
   align-items: center;
 }




 .menu-toggle {
   display: none;
   background-color: #333;
   color: white;
   padding: 14px;
   text-align: center;
   cursor: pointer;
}

 @media screen and (max-width: 768px) {
   .nav ul {
       display: none; 
       width: 100%;
   }

   .nav ul li {
       display: block;
       text-align: left;
   }

   .nav ul li a {
       padding: 10px;
   }

   .menu-toggle {
       display: block;
   }

   .nav.open ul {
       display: block; 
   }
}


.two-column-section {
   display: flex;
   justify-content: space-between;
   padding: 20px;
   background-color: transparent;
   gap: 10px;
}


.left-column {
   flex: 1;
   text-align: right; 
}


.right-column {
   flex: 1;
   text-align: left; 
}



.footer {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    background-color:#333; 
    padding: 15px 30px; 
    color: white;
    position: relative;
    width: 100%;
 }


.footer-logo {
    width: 20%; 
 }


.footer-buttons {
    display: flex;
    gap: 10px; 
    justify-content: center; 
    flex-grow: 1; 
    position: relative;
    left: -13%; 
 }


.btn {
    background-color: green;
    color: white;
    border: none;
    padding: 8px 15px; 
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.3s;
    text-align: center; 
 }

.btn:hover {
    background-color: darkgreen;
 }

 .footer-share {
    display: flex;
    gap: 10px; 
    position: absolute;
    left: 80%; 
    flex-direction: column;
 }

 share-row {
    display: flex;
    justify-content: center; 
    gap: 10px; 
}


.share-btn {
    text-decoration: none;
    font-size: 18px; 
    background-color: white;
    color: black;
    padding: 5px 8px;
    border-radius: 5px;
    transition: 0.3s;
 }

.share-btn:hover {
    background-color: lightgray;
 }
 .share-btn::after {
    content: attr(data-tooltip); 
    position: absolute;
    bottom: 100%; 
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap; 
 }
.share-btn:hover::after {
    visibility: visible;
    opacity: 1;
 }

.menu-toggle {
    display: none;
    background-color: #333;
    color: white;
    padding: 14px;
    text-align: center;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    #navbar ul {
        display: none;
        flex-direction: column;
        background-color: #333;
        width: 100%;
    }

    #navbar.open ul {
        display: flex;
    }

    #navbar ul li {
        text-align: left;
        width: 100%;
    }

    #navbar ul li a {
        padding: 10px;
        display: block;
    }

    .menu-toggle {
        display: block;
    }

    .text-section, .two-column-section {
        flex-direction: column;
        padding: 5%;
    }

    .column, .left-column, .right-column {
        margin: 5% 0;
        text-align: center;
    }

    .zentrierte-section {
        width: 90%;
    }
}