h1
{
	font-size: 1.5vw;
	color: yellow;
	font-family: 'Verdana', sans-serif;
	font-weight: bold;
	margin: 0.0vw;
}
h2
{
	font-size: 1.2vw;
	color: white;
	font-family: 'Verdana', sans-serif;
	font-weight: normal;
	margin: 0.4vw;
	font-weight: bold;
}
h3
{
	font-size: 1.0vw;
	color: white;
	font-family: 'Verdana', sans-serif;
	font-weight: normal;
	margin: 0.5vw;
	margin-bottom: 0.25vw;
	text-decoration: underline;
}
h4
{
	font-size: 0.9vw;
	color: white;
	font-family: 'Verdana', sans-serif;
	font-weight: normal;
}
p
{
	color: rgb(255, 255, 255);
	text-align: center;
	font-size: 0.7vw;
	margin: 0.5vw;
	font-family: 'Verdana', sans-serif;
}
li
{
	color: rgb(255, 255, 255);
	text-align: center;
	font-size: 0.7vw;
	margin: 0.5vw;
	font-family: 'Verdana', sans-serif;
}
a
{
	color: rgb(150, 150, 255);
	text-align: center;
	font-size: 0.9vw;
	margin: 0.0vw;
	font-family: 'Verdana', sans-serif;
	text-decoration: underline;
}



body {
	background-image: url('../Images/background.png');
	margin: 1.0vw;
	padding: 0;
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	background-color: black;
	display: flex;
	justify-content: center;
	align-items: center;
}



/*
a:link, a:visited {
	color: inherit;
	text-decoration: none;
}
*/

/* Navigation */
	.dropdown {
		position: relative;
		display: inline-block;
	}


	.dropdown-content {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease;
		background-color: rgba(80, 80, 80, 0.95); /* dunkler halbtransparenter Hintergrund */
		padding: 0.5vw;
		border-radius: 0.5vw;
		box-shadow: 0 0 10px rgba(255, 106, 0, 0.4); /* optionaler Schatten */
		gap: 0.5vw;
		z-index: 10;
	}
	
	.dropdown:hover .dropdown-content {
		visibility: visible;
		opacity: 1;
	}

	.dropdown-content .btnImage {
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

   .btnCon {
		display: flex;
		justify-content: center;
		gap: 2vw;
		position: absolute;
		width: auto;
		margin-top: 51vw;	
	}

	.btnImage
	{
		background-image: url('../Images/button.png');
		background-color: transparent;
		width: 11vw;
		height: 2.1vw;
		background-size: cover;
		background-position: center;
		border: none;
		cursor: pointer;
		transition: background-image 0.75s ease;
		transition: color 0.75s, border-color 0.75s;
		color: yellow;
		font-size: 0.8vw;
		font-family: Verdana, sans-serif;
		font-weight: bold;
		text-align: center;
		text-decoration: none;		
		color: yellow;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.btnImage:hover { color: lime; }
	.btnImage.clicked { color: lime; }
	.btnImage.high { background-image: url('../Images/button_high.png'); }
/* Navigation */



/* Allgemeine Elemente */
	.mainContainer {
		text-align: center;
		align-items: center;
		width: 100vw;
		height: 75vh;
		margin-top: -0.5vw;">
	}

	.mainImage {
		width:45vw;
		height:auto;
	}

	.smartIcon {
		width: auto;
		height: 1.3vw;
	}


	.ueberschrift {
		color: rgb(255, 255, 255);
		text-align: center;
		font-size: 42px;
		margin: 20px;
		font-family: 'Verdana', sans-serif;
	}
	
	
	.textCon {
		background-image: url('../Images/SmallTextBack.png');
		background-size: cover;
		height: 7.6vw;
		width: 26vw;
		margin: 3vw;
	}
	
	.textGroß {
		color: rgb(255, 255, 255);
		text-align: center;
		font-size: 1.5vw;
		font-family: 'Verdana', sans-serif;
	}
	

	.textNormal {
		color: rgb(255, 255, 255);
		text-align: center;
		font-size: 0.9vw;
		margin: 0.0vw 0.7vw;
		font-family: 'Verdana', sans-serif;
	}
	
	.textKlein {
		color: rgb(255, 255, 255);
		text-align: center;
		font-size: 0.7vw;
		margin: 0.0vw 0.7vw;
		font-family: 'Verdana', sans-serif;
	}
	
	
	.container {
		display: flex;
		gap: 1.25vw;
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	

	.imgBox {
		position: relative;
		overflow: hidden;
		border: 0.25vw dashed #FF6A00;
		border-radius: 0.5vw;
		width: 26vw;
	}

	.imgBoxCon {
		display: flex;
		z-index: 0;
		transition: transform 0.5s ease;
	}

	.imgBoxCon img {
		width: 100%;
		height: auto;
	}
	
	btnImgBox {
		position: absolute;
		top: 50%; /* Vertikale Mitte */
		transform: translateY(-50%); /* Vertikal zentrieren */
		background-color: rgba(120, 120, 120, 0.3);
		border: none;
		padding: 10px;
		cursor: pointer;
		font-size: 18px;
		border-radius: 5px;
		transition: background-color 0.3s;
	}

	btnImgBox:hover {
		background-color: rgba(200, 200, 200, 0.8);
	}

	.prev { left: 10px; }
	.next { right: 10px; }
/* Allgemeine Elemente */



	.smallCapsule {
		background-image: url('../Images/SmallCapsule.png');
		position: fixed;
		top: 1vw;
		right: 2vw;
		z-index: 1000;
		width: 155px;
		height: 97px;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 0.5vw;
	}

	.smallCapsule-row {
		display: flex;
		gap: 1vw;
		justify-content: center;
		width: 100%;
	}

	.smallCapsule a {
		text-align: center;
	}