body {
      font-family: 'Open Sans', sans-serif;
	   font-optical-sizing: auto;
	  font-weight: <weight>;
	  font-style: normal;
	  font-variation-settings:
		"wdth" 100;
      font-size: 16px;
      margin: 0;
      padding: 0;
    }
	
h1, h2{
	font-family: 'Open Sans', sans-serif;
	font-size: 25px;
	font-weight: normal;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	color: #FF9900;
	padding-top: 50px;
	padding-bottom: 30px;
}

h2{
    font-size: 20px;
}

h3{
	font-size: 16px;
	text-transform: uppercase;
	color: #FF9900;
	font-weight: normal;
}
	
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#logo {
  width: 250px; /* Größe des Logos */
}

#navigation{
	margin-top: 80px;
	scroll-padding-top: 100px;
}

#navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}


#navigation ul li {
  margin-right: 20px;
}

#navigation ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  position: relative;
  padding: 10px 0; /* Abstand oben und unten für besseren Hover-Effekt */
  transition: color 0.3s ease; /* Hover-Effekt für Textfarbe */
}

#navigation ul li a:hover {
  color: #FF9900; /* Neue Farbe bei Hover */
}

#navigation ul li a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%; /* Positioniert die Linie oberhalb des Links */
  height: 3px; /* Höhe der Linie */
  background-color: #FF9900;
  transform: scaleX(0); /* Startet die Linie unsichtbar */
  transition: transform 0.3s ease;
  transform-origin: left;
}

#navigation ul li a:hover::before {
  transform: scaleX(1); /* Zeigt die Linie bei Hover */
}
#header-wrapper, #inhalt-wrapper, #footer-wrapper{
	width: 100%;
}

#header-wrapper{
	height: 130px;
	background-color: #FFFFFF;
	position: fixed;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.header, .inhalt, #footer{
	width: 950px;
	margin: 0 auto;
	box-sizing: border-box;
}

.about-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.about-image {
    max-width: 400px;
    height: auto;
    flex-shrink: 0;
}

.about-text {
    flex: 1;
}

.about-text li{
	padding-bottom: 20px;
}

.image-row {
    display: flex;
    justify-content: space-between; /* Optional: Adjusts space between images */
    gap: 0px; /* Optional: Adds gap between images */
	width: 100%;
}

.responsive-image {
    max-height: 50vh; /* Set the desired height */
    object-fit: cover; /* Ensures the image covers the specified height while maintaining aspect ratio */
    width: auto; /* Allows the width to adjust automatically */
    flex: 1; /* Ensures images grow equally */
}

.image-text-container {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Adds space between the image and text */
}

.text-image {
    max-width: 400px;
    width: 100%; /* Ensures the image scales with the container */
    height: auto;
    flex-shrink: 0; /* Prevents the image from shrinking */
}

.text-content {
    flex: 1; /* Allows the text content to take the remaining space */
}

#header-image {
    height: 90vh;
    background-image: url('../img/labyrinthe.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
	z-index: 1;
	background-size: 120%;
}

.slogan-box {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparentes Schwarz */
    padding: 20px 40px;
    color: white;
    text-align: center;
    border-radius: 10px;
}

.slogan-box h1 {
    margin: 0;
    font-size: 20px;
	color: #FFFFFF;
	text-transform: none;
}
		
		
.ornament {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    transform: rotate(45deg);
    margin: 0 10px;
}

.listabstand li,
.about-container li{
	padding-bottom: 20px;
}

.listabstand{
	padding-bottom: 20px;
}

@media screen and (max-width: 1260px) {
	.responsive-image {
		max-height: 40vh; /* Set the desired height */
		
	}
}

@media screen and (max-width: 1000px) {
	.responsive-image {
		max-height: 30vh; /* Set the desired height */
		
	}
	
	.header, .inhalt, #footer{
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		
	}
}

@media screen and (max-width: 880px) {
	.about-image {
		max-width: 300px;
		height: auto;
		
	}
}

@media screen and (max-width: 760px) {
	.responsive-image {
		max-height: 20vh; /* Set the desired height */
		
	}
}

@media screen and (max-width: 720px) {
	
	.image-row, .header{
        flex-direction: column; /* Bilder untereinander anordnen */
    }
	
	.responsive-image {
        max-height: 300px; /* Höhe auf 300px begrenzen */
        width: 100%; /* Volle Breite einnehmen */
        flex: none; /* Flex-Verhalten aufheben, damit die Bilder nicht gleichmäßig wachsen */
    }
	
	#header-wrapper{
		height: auto;
		position: relative;
	}
	
	#navigation{
		margin-top: 20px;
		margin-bottom: 20px;
		width: 100%;
		background-color: #ffffff;
		
	}
	
	#navigation ul{
		float: right;
	}
	
	
	#logo {
	  width: 100%; /* Größe des Logos */
	  display: block;
	}
	
	#header-image{
		height: 50vh;
	}
}

@media screen and (max-width: 680px) {
	
	.about-container{
		flex-direction: column;
	}
	
	.about-text {
		
	}
	.about-image {
		max-width: 100%;
		
	}
}

@media screen and (max-width: 470px) {
	#logo {

	  text-align: center;
	}
	
	#header-image{
		height: 30vh;
	}
	
	.slogan-box{
		display: none;
	}
	
	#navigation a{
		font-size: 12px;
	}
}