body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  display: flex;
  background-image: url("/images/Hintergrund.png");
  background-size: cover;
  background-attachment: fixed;
  flex-direction: column;
  min-height: 100vh
}

.echterinhalt {
	margin: 0% 10%
}


/* textformat für Haupttext_HAUPTSEITE zentriert*/

.main-text1 {
font-size:18px;
text-align:center;
}

/* textformat für Haupttext  Blocksatz! */
.main-text {
font-size:18px;
text-align:justify;
}


/* textformat für Überschrift */
.main-Subtitle {
text-align: center;
font-size:36px; 
font-style:strong;
  margin-top: 0
}



	.ticker-content:hover {
    animation-play-state: paused;
}


	
        /* News Ticker Wrapper */
        .fancy-ticker-wrapper {
			background: linear-gradient(to left, #778A4A, #BBD087C4);
            color: #fff;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            padding: 10px 0;
            position: fixed;
            top: 0;
            z-index: 1000;
        }

        /* Static Icon Section */
        .ticker-icon {
            font-size: 24px;
            margin: 0 20px;
            animation: fade 1s ease-in-out infinite alternate;
        }

        /* Keyframes for Icon Fade Animation */
        @keyframes fade {
            from {
                opacity: 1;
            }
            to {
                opacity: 0.5;
            }
        }

        /* News Content with Animation */
        .ticker-content {
            display: inline-block;
            animation: scroll-left 15s linear infinite;
        }

        .ticker-item {
            display: inline-block;
            margin-right: 50px; /* Space between each news item */
        }

        /* Animation for Scrolling Left */
        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }






header {
  width: 7%;
  padding: 90px;
  background: url("/images/Schriftzug.png") no-repeat center center;
  background-size: 100% auto; /* Ensure the image covers the full width and maintains aspect ratio */
  color: #fff;
  text-align: center;
  position: fixed;
  top: 30px;
  left: 0,2%;
  z-index: 1000; /* Ensure the header is on top */
  
}

.content {
  margin-left: max(18%, 100px); /* Account for the fixed menu width */

  width: 50%;
  padding:  200px 0% 0px 0%; /* Add padding inside the container */
background: linear-gradient(to right, #8E9F62, #BBD087C4);

  
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Adds a blurred shadow effect */
}





.menu {
  width: 18%;
  min-width: 150px;
  background: linear-gradient(to left, #778A4A, #BBD087C4);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Adds a blurred shadow effect */
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 260px; /* Adjusting for header height */
  bottom: 0;
  overflow-y: auto;
  right:0;
  transition: transform 0.3s ease; /* Smooth transition for menu slide */
}
.menu-item {
  color: black;
  padding: 16px;
  border-bottom: 1px solid rgba(119, 138, 74);
  text-decoration: none; /* Remove underline */
  cursor: pointer;  
  text-transform: uppercase; /* Transform text to uppercase */
}

.menu-item:hover {
  background: rgba(119, 138, 74);
}

.menu-item.active {
  background: rgba(119, 138, 74);
}

a:visited {
  color: black;
}



.fixed-image-block {
  position: fixed;
  top: 5%; /* Adjust the position as needed */
  right: 2%; /* Adjust the position as needed */
  z-index: 1000; /* Ensure the block is on top */
  }
  
  .fixed-image-block img {
  max-width: 400px; /* Adjust the size as needed */
  height: auto;
  }
 
/* Media Queries */
@media (max-width: 1200px) {


header {
  width: 5%;}

  .fixed-image-block img {
    width: 200px; /* Adjust size for smaller screens */
  }
}

@media (max-width: 1000px) {


header {
  width: 2%;}
  .fixed-image-block img {
    width: 150px; /* Further adjust size for even smaller screens */
  }
}

@media (max-width: 600px) {

header {
  width: 0.5%;}

  .fixed-image-block img {
    width: 100px; /* Adjust size for mobile screens */
  }
}



/* Media query for mobile devices */
@media (max-width: 768px) {
	header {
	  filter: brightness(0.8);
	}
  .menu {
    transform: translateX(100%); /* Hide the menu offscreen */
    position: fixed;
    top: 150px;
    right: 0px;
    width: 200px; /* Adjust the width of the menu for mobile */
	z-index:10000;
	background: linear-gradient(to left, #778A4A, #BBD087)
  }
	
  .menu.active {
     transform: translateX(0); /* Slide the menu into view */
  }

  .hamburger {
    position: fixed;
    top: 50px;
    left: 30px;
    font-size: 40px;
	color: #8C0C0C;      
   	cursor: pointer;
    z-index: 1100; /* Ensure the hamburger icon is on top */

  
  }
  
  

  .content {
    margin-left: 0; /* Reset the left margin */
    width: 100%; /* Full width for content on mobile */  
	padding: 20px 0% 0px 0%;
  }
  
  .echterinhalt{
	margin-top:130px;
	overflow: auto;
  }
  
  a {
	word-wrap: anywhere; /* So that links dont overflow the content */
  }

  footer {
    margin-left: 0; /* Reset the left margin */
    width: 100%; 
}




}







.responsive-image {
  max-width: 50%; /* Ensures the image does not exceed the container width */
  height: auto; /* Maintains the aspect ratio */
  display: block; /* Makes the image a block element, so it can be resized */
  margin: 25px 0; /* Adds some space around the image */
}

.float-image {
  float: right; /* Floats the image to the left */
  margin: 10px; /* Adds space around the image */
  max-width: 40%; /* Ensures the image does not exceed 40% of the container width */
  height: auto; /* Maintains the aspect ratio */

}

footer {
 
 width: 100%;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Adds a blurred shadow effect */
  background: #778A4A;
  color: #FFF;
   padding:  20px 0 20px 0;
  text-align: center;

}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-content p {
  margin: 0 0 10px;
}

.footer-content a {
  color: #FFF;
  text-decoration: none;
}

.footer-content a:hover {
  text-decoration: underline;
}



.footer-content .fab {
  font-size: 24px;
  color: #FFF;
  margin-right: 10px;
  transition: color 0.3s;
}

.footer-content a:hover .fab {
  color: #E1306C; /* Instagram brand color */
}