/* Global Styles */
*{
	padding: 0; /* Reset all padding to 0 */
	margin: 0; /* Reset all margin to 0 */
}
#Streifen{
	height: 2px; /* Set header height */
	background: #743354; /* Set header background color */
}
#Streifen2{
	height: 100px; /* Set header height */
	background: #743354; /* Set header background color */
}
#header{
	height: 55px; /* Set header height */
	background: #f0f0f0; /* Set header background color */
}

#anzeige{
	display: flex;
	height: 250px; /* Set header height */
	background:#743354 ; /* Set header background color */
	justify-content: center;
	}

#anzeige2
   {
	padding-top: 10px;   
	width: 800px;
	color: white;
	 background-color: #743354;   
	}
/*Tex*formatierungen*/

 p{
	
	 font-size: 40px;
}
p1{
	font-size: 25px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
p2{
	font-size: 13px;
	/text-align: right;
}

p4{
	font-size: 14px;
	line-height: 1.8;
	color: gray;
	/text-align: right;
}
h1{
	font-size: 20px;
	color: #743354;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
	
}


.navbar {
  display: flex;
  justify-content:center;
  	  
}
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
 font-size: 12px
		
}

nav ul li a {
  /* Fügt einen rechten Rand hinzu */
  border-right: 1px solid #FFF;
  padding-right: 15px; /* Abstand zum Strich */
  text-decoration: none; /* Entfernt Unterstreichung der Links */
  color: #333;
}

/* Optional: Entfernt den Strich beim letzten Element */
nav ul li:last-child a {
  border-right: none;
  padding-right: 10;
}
nav {
 
  float: right;
  margin: 0;
}



li {
  display: inline-block;
}

nav a {
  display: block; /* Macht den gesamten Bereich anklickbar */
  padding: 20px 12px 20px 12px; /* Innenabstand (erzeugt die Größe des Rechtecks) */
  background-color: #f0f0f0; /* Hintergrundfarbe */
  /border: 0px solid #ccc; /* Rahmen für deutliche Rechtecke */
  text-decoration: none; /* Entfernt Unterstreichung des Links */
  color: #333; /* Textfarbe */
  text-align: center; /* Zentriert den Text im Rechteck */
  /border-radius: 0px; /* Leichte Abrundung der Ecken (optional) */
		
}



nav a:hover {
  color: crimson;
  background-color: whitesmoke;
	  
}

nav a:active {
  font-weight: bold;
	
}


* {
  font-family:sans-serif;
}
body {
 margin: 0;

}

		
}

#Bilder
{
	margin: 0 auto;
	width: 800px;
	display: flex;
	height: 300px; /* Set header height */
	background: ; /* Set header background color */
	justify-content: center;
}

.slider-container {
  position: relative; /* Wichtig für absolute Positionierung der Bilder */
  /width: 90%;
  height: 300px; /* Beispielhöhe */
  overflow: hidden; /* Versteckt überlappende Bilder */
}

.slider-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  opacity: 0; /* Standardmäßig unsichtbar */
  animation: fade 12s infinite; /* 12s Dauer, unendlich */
}

/* Bilder sequenziell einblenden */
.slider-container img:nth-child(1) { animation-delay: 0s; }
.slider-container img:nth-child(2) { animation-delay: 4s; } /* Wechsel nach 4s */
.slider-container img:nth-child(3) { animation-delay: 8s; } /* Wechsel nach 8s */

@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; } /* Kurzes Einblenden */
  30% { opacity: 1; } /* Bleibt sichtbar */
  40% { opacity: 0; } /* Ausblenden */
  100% { opacity: 0; }
}

/* Optional: Responsive Bildgröße */
.slider-container img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Sorgt dafür, dass das Bild den Bereich füllt */
}

.container {
  display: flex; /* Aktiviert Flexbox für den Container */
  gap: 8px; /* Optional: Abstand zwischen den Divs */
  width: 800px;
  margin: 0 auto;
  margin-top: 20px;
  height: 270px;	
  	
}	


.box-li {
  flex: 1; /* Lässt beide Boxen gleich viel Platz einnehmen */
  background-color: lightgray;
  padding: 6px;
  border: 1px solid #B1B1B1;
  border-radius: 1%	
  	
}
.box-re {
  flex: 1; /* Lässt beide Boxen gleich viel Platz einnehmen */
  /background-color: lightblue;
  /padding: 6px;
}


.containerinfo {
  display: flex; /* Aktiviert Flexbox für den Container */
  gap: 2px; /* Optional: Abstand zwischen den Divs */
  width: 800px;
  margin: 0 auto;
  margin-top: 20px;
  height: 800px;	
  	
	
}
.containerinfo2 {
  display: flex; /* Aktiviert Flexbox für den Container */
  gap: 2px; /* Optional: Abstand zwischen den Divs */
  width: 800px;
  margin: 0 auto;
  margin-top: 20px;
  height: 4050px;	
  	
	
}

.containerinfo3 {
  display: flex; /* Aktiviert Flexbox für den Container */
  gap: 2px; /* Optional: Abstand zwischen den Divs */
  width: 800px;
  margin: 0 auto;
  margin-top: 20px;
  height:2200px;	
  	
	
}

.box-lin {
  flex: 2; /* Lässt beide Boxen gleich viel Platz einnehmen */
  padding: 10px;
  /border-radius: 1%;
    border-right: 1px solid lightgrey; /* 1px breit, durchgezogen, schwarz */
  padding-left: 1px; /* Abstand vom Strich zum Inhalt */	
 	
  	
}
.box-rec {
  flex: 1; /* Lässt beide Boxen gleich viel Platz einnehmen */
  /background-color: lightblue;
  padding: 10px;
  border-left: 1px solid lightgrey; /* 1px breit, durchgezogen, schwarz */
  padding-left: 15px; /* Abstand vom Strich zum Inhalt */
}

.Willkommen
{
    margin: 0 auto;
	/background-color: aqua;
	padding-top 10px;
	width: 800px;
	display: block;
	margin-top: 20px;
	text-align: justify;
	text-align: left;
	
}

/*Button*/
/* Grundstil für alle Buttons */
.mein-button, .mein-link-button {
    /padding: 10px 20px;
    /border: none;
    /border-radius: 2px;
    /background-color: #007bff;
    /color: white;
    /font-size: 13px;
    /cursor: pointer; /* Zeigt an, dass es klickbar ist */
    /transition: background-color 0.3s ease; /* Sanfter Übergang */
	/margin-top: 8px;
	/width: 300px;
	float:right;
	/align-content: center;
}

/* Zustand, wenn der Mauszeiger über dem Button ist */
.mein-button:hover, .mein-link-button:hover {
   background-color: darkgrey; /* Dunklere Farbe */
}

/* Zustand, wenn der Button geklickt wird */
.mein-button:active, .mein-link-button:active {
    /background-color: #004085; /* Noch dunklere Farbe */
    transform: translateY(1px); /* Leichte Bewegung nach unten */
}

/* Stil für den Link-Button, um Unterstreichung zu entfernen */
.mein-link-button {
    /text-decoration: none;
    display: inline-block; /* Wichtig für Padding/Margin */
}

/*Teamheadline*/

#Teamheadline
{
	margin: 0 auto;
	width: 800px;	
	display: flex;	
    justify-content: center;
	margin-top: 10px;
}

/*Bildergallerie*/

#Bilder2
{
	margin: 0 auto;
	width: 800px;
	display: flex;
	height: 300px; /* Set header height */
	background: ; /* Set header background color */
	justify-content: center;
	
}
div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  border: 1px solid #ccc;
  width: 180px;
}

div.gallery-item:hover {
  border: 1px solid #777;
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
}


html, body {
  margin: 0;
  padding: 0;
}

/* ===== Banner ===== */
.banner {
  display: flex;
  justify-content: center;	
  width: 100vw;
  height: 250px;
  position: relative;
  overflow: hidden;

  /* Grundfarbe */
  background-color: #743354;

  /* kleine Quadrate */
  background-image:
    linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);

  /* Größe der Quadrate */
  background-size: 14px 14px;
}

.banner2 {
  display: flex;
  justify-content: center;	
  width: 100vw;
  height: 80px;
  position: relative;
  overflow: hidden;

  /* Grundfarbe */
  background-color: #743354;

  /* kleine Quadrate */
  background-image:
    linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);

  /* Größe der Quadrate */
  background-size: 14px 14px;
}

/* optionaler Inhalt */
.banner-content {
  height: 350px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;

  display: flex;
  align-items: center;

  color: #ffffff;
  font-family: system-ui, sans-serif;
}

.banner-content h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
}