html, body 
	{	
		overflow: auto;
		margin: 0 auto;
		width: 100%;
		height: 100%;
		background-color: #f8f9fa;
		padding: 0;	
	}
	
#Kopf
	{	
		height:30%;
		background-color: #ccc;
		background-image: url("../Bilder/BildKopf.png");
		background-size:cover;
		background-position: right center;
		border-bottom: 1px solid #333;
	}

	.Schr {font-weight:bold;}

.Seitenname
	{
		color:#738c91;
	}


#Container
	{
    display: flex;         /* Richtet Nav und Inhalt nebeneinander aus */
    flex-wrap: wrap;           /* Erlaubt das Untereinanderfließen bei Zoom */
    justify-content: flex-start; /* Alles wird nach links geschoben */
    align-items: flex-start;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
	overflow-x: visible;
	}

#Inhalt
	{
		flex: 10 1 300px;   /* Starkes Wachsen, Basisbreite: 300px */
		min-width: 0;          /* WICHTIG: Verhindert, dass Inhalt (Bilder/Tabellen) den Container sprengt */
		word-wrap: break-word; /* Erlaubt Textumbrüche */
		overflow-wrap: break-word;	
	    width: 100%;         /* Erlaubt dem Inhalt, beim Umbruch die volle Breite zu nutzen */
		box-sizing: border-box;
		padding-left: 20px;
		padding-right: 20px;
	}

#Inhalt ul 
	{
		max-width: 100%; /* Verhindert, dass die Liste breiter als das div wird */
		padding-left: 20px; /* Reduziertes Padding für mehr Platz */
	}
	


#Inhalt::after {
    content: "";
    display: table;
    clear: both;
}

#Nav
	{
		flex-shrink: 0; 
	    flex: 1 0 150px;    /* Wachsen: ja, Schrumpfen: nein, Basisbreite: 150px */
		max-width: 250px;   /* Verhindert, dass die Nav am PC zu breit wird */
		min-width: 150px;
		position: relative;
		min-height: 500px;
		display:block;
		overflow:visible;
		margin-top:30px;
		width:10%;
		padding-right:30px;
	}

.LinksNav
	{
		color: white;
		font-size: 1.2rem;
	}


#Fuss 
	{	
		margin: 0 auto;
		min-height:200px;
		background-color: #2b2b2b;
		color: #ffebc3;
	}
#TabUnten
	{
			margin: 0 auto;
			width:85%;
			padding-left:8%;
	}

.BoxUnten
	{
		font-size:2.8rem;
		padding-top:10px;
		
	}

.BoxUnten2
	{
		vertical-align:top;
		font-size:0.9rem;
		padding-top:10px; 
	}

#Boden
	{
		min-height: 50dvh;
		
		font-size: 1.1rem;
		padding-right:5%;
		text-align: center;

		background-color:#1B1B1B;
		color: #ffebc3;
	}

.dropbtn 
	{
	  background-color: #738c91;
	  padding: 10px;
	  font-size: 1.2rem;
	  border: none;
	  cursor: pointer;
	  font-family: arial;
	  margin-top:1%;
	  width:180px;
	  color: white;
	  white-space: nowrap;
	}

.dropdown a
	{
		color:white:
	}

.dropdown 
	{
	  position: relative;
	  display: inline-block;
	  margin-top:1%;
	}

.dropdown-content 
	{
	  display: none;
	  position: absolute;
	  background-color: #f9f9f1;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
	  z-index: 1;
	  margin-top: 2px;
	  font-family: arial;
	  font-size: 1.2rem;
	}

.dropdown-content a 
	{
	  color: black;
	  padding: 7px;
	  padding-top: 10px;
	  text-decoration: none;
	  display: block;
	  font-size: 1.2rem;
	}

.dropdown-content a:hover 
	{
	  background-color: #e1f1f1
	}

.dropdown:hover .dropdown-content 
	{
	  display: inline-block;
	}

.dropdown:hover .dropbtn 
	{
	  background-color: #3e8e41;
	}

@media only screen and (max-width: 4000px) 
{  

	#Boden
		{
			min-height: 30dvh;
					
		}

}

@media only screen and (max-width: 3000px) 
{  

	#Boden
		{
			min-height: 10dvh;
					
		}

}

@media only screen and (max-width: 1200px) 
	{  


#Container
	{
    display: flex;         /* Richtet Nav und Inhalt nebeneinander aus */
    flex-wrap: wrap;           /* Erlaubt das Untereinanderfließen bei Zoom */
    justify-content: flex-start; /* Alles wird nach links geschoben */
    align-items: flex-start;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
	overflow-x: visible;
	}

#Nav
	{
		flex-shrink: 0; 
		
	    flex: 1 0 150px;    /* Wachsen: ja, Schrumpfen: nein, Basisbreite: 150px */
		max-width: 250px;   /* Verhindert, dass die Nav am PC zu breit wird */
		
		min-width: 150px;
		position: relative;
		min-height: 500px;
		display:block;
		overflow:visible;
		margin-top:30px;
		width:10%;
		padding-right:30px;
	}
	
		.LinksNav
			{
			  font-size: 1rem;
			}
		.dropbtn 
			{
			  width:150px;
			  padding: 6px;
			}
		.BoxUnten
			{
			  font-size:2rem;	
			}
		.BoxUnten2
			{
		      font-size:0.8rem;
			}
	
	
	
	} 

@media only screen and (max-width: 800px) 
{

	
	.LinksNav
		{
		font-size: 0.4rem;
		} 
	.dropbtn 
		{
		  font-size: 0.8rem;
		  width:80px;
		  padding: 4px;

		}
	.BoxUnten
		{
		font-size:1.8rem;	
		}
	.BoxUnten2
		{
		font-size:0.7rem;
		}
		
	 #Container 
		{
        display: block; /* Nav über Inhalt statt daneben */
		}
     #Nav
		{
			display: flex;
			gap: 1px;
			width: 100%;       /* Volle Breite auf dem Handy */
			min-width: 100%;
			padding-right: 0;
			margin-top: 10px;
			min-height: auto;  /* Höhe auf dem Handy reduzieren */
		}
     #Inhalt 
		{
			width: 100%;
			padding-left: 10px;   /* Rückt den Inhalt ganz nach links */
		}
}  
@media only screen and (max-width: 600px) 
{

	
	.LinksNav
		{
		font-size: 0.4rem;
		} 
	.dropbtn 
		{
		font-size: 0.8rem;
		  width:70px;
		  padding: 1px;

		}
	.BoxUnten
		{
		font-size:1.4rem;	
		}
	.BoxUnten2
		{
		font-size:0.4rem;
		}
	 #Container 
		{
        display: block; /* Nav über Inhalt statt daneben */
		}
     #Nav
		{
	
			width: 100%;       /* Volle Breite auf dem Handy */
			min-width: 100%;
			padding-right: 0;
			margin-top: 10px;
			min-height: auto;  /* Höhe auf dem Handy reduzieren */
		}

}

@media (max-width: 500px) 
{
	

    #Container 
		{
			display: block; /* Schaltet Flexbox aus, alles wird zum einfachen Stapel */
		}
	
	.dropbtn 
		{
		font-size: 0.7rem;
		  width:50px;
		  padding: 1px;
		}
	


}