:root {
	--color-primary:	#5270B4;
	--color-secondary:	#7892CE;
	--color-letter:		black;
	--color-border: 	#1D3F8C;
	--color-button: 	#8f3d3d;
	--color-gray: 		#333333;
	--color-red: 		#8B0000;
	--color-ghostwhite:	#f8f9fb;
	--spacing-sm:		0.5rem;
	--spacing-border:	0.1rem;
}

html, body {
	font-family:		system-ui, sans-serif;
	height:				100%;
	line-height:		1.2;
	font-size:			clamp(16px, 1.2vw, 18px);
}

body {
	min-height:			100vh;
	min-height:			100dvh;
	display:			flex;
	flex-direction:		column;
	margin:				0;
    background-color:	var(--color-primary);
	color:				var(--color-letter);
}

.landingPage {
	flex:				1 1 auto;
    margin-left:		var(--spacing-sm);
    margin-right:		var(--spacing-sm);
	min-height: 		calc(100vh - 120px);
	min-height: 		calc(100dvh - 120px);
	display:			flex;
	justify-content:	center;
	align-items:		center;
}

.contentPage {
	flex:				1 1 auto;
    margin-left:		var(--spacing-sm);
    margin-right:		var(--spacing-sm);
	justify-content:	self-start;
	align-items:		self-start;
}

.menu {
    display: 			flex;
	flex-direction:		row;
	flex-wrap:			nowrap;
    justify-content: 	space-between;
    align-items: 		center;
	align-content:		center;
	margin-top:			var(--spacing-sm);
    margin-left:		var(--spacing-sm);
    margin-right:		var(--spacing-sm);
	padding:			var(--spacing-sm);
	line-height:		0.8;
}

@media (max-width: 700px) {
	.menu {
		flex-direction:		column;
		align-items:		stretch;
		gap:				0.5rem;
	}	
}


.menu--ssr {
    background-color: 	var(--color-secondary);
    border-top: 		var(--spacing-border) solid var(--color-border);
    border-bottom: 		var(--spacing-border) solid var(--color-border);
}

.menu__items {
	display:			flex;
	gap:				1.5rem;
	border:				0;
	margin:				0;
	padding:			0;
}

@media (max-width: 700px) {
	.menu__items {
		flex-direction:		column;
		gap:				0.5rem;
	}	
}

.menuitems--ssr {
	list-style:			none;
	color:				var(--color-letter);
}

.menuitems--footer {
	list-style:			none;
	color:				var(--color-letter);
	font-size:			0.85rem;
	line-height:		0.4;
	gap:				4rem;
}

@media (max-width: 700px) {
	.menuitems--footer {
		font-size:			1rem;
		line-height:		1.2;
		gap:				1rem;
	}	
}

.menuitem--ssr {
	text-decoration:	none;
}

.menu__right {
	gap:				0.2rem;
}

@media (max-width: 700px) {
	.menu__right {
		justify_content:	center;
	}	
}

.menuright--ssr {
	font-size:			0.75rem;
}

@media (max-width: 700px) {
	.menuright--ssr {
		font-size:			1rem;
	}	
}

.menu__item:link,
.menu__item:visited {
	color: 				var(--color-letter);
}

.menu__item:focus,
.menu__item:hover {
    background-color:	var(--color-primary);
}

.menu__item:active {
    background-color:	var(--color-primary);
	color:				white;
}

.table {
	width: 				100%;
	border-collapse: 	separate;
	border-spacing: 	0;
	font-size: 			1rem;
	line-height: 		1.4;
}

.table th,
.table td {
	text-align: 		left;
	vertical-align: 	top;
	padding: 			0.75rem 1rem;
}

.table th {
	font-weight: 		600;
	border-bottom: 		1px solid var(--color-ghostwhite);
}

.table td {
	border-bottom: 		1px solid var(--color-ghostwhite);
}

.table tbody tr:hover {
	background: 		var(--color-ghostwhite);
}

.flag{
	width:				1.2rem;
	height:				0.8rem;
	vertical-align:		middle;
}

.runningTextContainer {
    align-items: 		center;
	align-content:		center;
	overflow:			clip;
	overflow-clip-margin: 5px;
	white-space:		nowrap;
	font-size:			0.75rem;
	color: 				var(--color-red);
	font-weight:		bold;
}

.runningText {
	display:			inline-block;
	padding-left:		100%;
	animation:			laufschrift 15s linear infinite;
}

@keyframes laufschrift {
	0% {transform: translate(0,0);}
	100% {transform: translate(-100%,0);}
}

.brand {
	display: 			flex;
}

.brandBig--ssr {
	align-items:		center;
	justify-content:	center;
	color: 				var(--color-secondary);
	font-style:			italic;
	font-weight:		bold;
	font-size:			5rem;
	margin-bottom:		clamp(1rem, 20vh, 8rem);
}

@media (max-width: 700px) {
	.brandBig--ssr {
		font-size: 		2.5rem;
	}
}

.brandSmall--ssr {
	align-items:		flex-end;
	justify-content:	flex-end;
	color: 				var(--color-secondary);
	font-style:			italic;
	font-weight:		bold;
	font-size:			2rem;
}

@media (max-width: 700px) {
	.brandSmall--ssr {
		font-size: 		1.6rem;
	}
}

.h1--ssr {
	margin:				0;
	font-size:			1.8rem;
	color:				var(--color-gray);
}

.h2--ssr {
	margin:				0 0 0.5rem 0;
	font-size:			1.3rem;
	color:				var(--color-gray);
}

.btn {
	border:				0.06rem solid rgba(0, 0, 0, 0.08);
	padding: 			0.75rem 1.63rem;
	border-radius:		0.25rem;
	transition:			background-color 0.25s ease,
						box-shadow 0.25s ease,
						transform 0.15s ease;
}

.btn--ssr {
	background:			linear-gradient(135deg, #9c4a4a, #7a2f2f);
	color:				white;
	border-color:		white;
	font-size:			0.94rem;
	font-weight:		600;
	letter-spacing:		0.025rem;
	cursor:				pointer;
	box-shadow:			0 0.13rem 0.5rem rgba(0, 0, 0, 0.08);
}

.btn--ssr:focus {
	outline:			none;
	box-shadow:			0 0 0 0.2rem rgba(143, 61, 61, 0.25);
}

.btn--ssr:hover {
	background-color:	#7a2f2f;
	box-shadow:			0 0.25rem 0.6rem rgba(0, 0, 0, 0.15);
}

.btn--ssr:active {
	transform:			translateY(1px);
	box-shadow:			0 0.13rem 0.38rem rgba(0, 0, 0, 0.08);
}

input[type="text"] {
padding: 5px;
}

input[type="checkbox"] {
	appearance:			none;
	-webkit-appearance: none;
	width: 				1.25rem;
	height: 			1.25rem;
	border: 			0.06rem solid #ddd;
	border-radius:		0.25rem;
	background-color: 	white;
	cursor: 			pointer;
	transition: 		all 0.2s ease;
	outline: 			none;
	vertical-align: 	middle;
}

input[type="checkbox"]:checked {
	background-color: 	var(--color-secondary); 
	border-color: 		white;
}

input[type="checkbox"]:checked::after {
	content: 			'\2713';
	color: 				white;
	display: 			flex;
	justify-content: 	center;
	align-items: 		center;
	font-weight: 		bold;
}

input[type="checkbox"]:focus-visible {
	box-shadow: 		0 0 0 3px rgba(74, 144, 226, 0.3);
}

.labelAbove {
	display:			block;
	margin-bottom:		0.3rem;
}

.labelAbove--ssr {
	font-style:			italic;
	font-size:			0.9rem;
}

.mainsearch1 {
	display: 			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	center;
	align-items:		flex-end;
	gap: 				4rem;
    margin:				var(--spacing-sm);
}

@media (max-width: 700px) {
	.mainsearch1 {
		gap:			1rem;
	}	
}

.mainsearch1--ssr {
	display: 			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	center;
	gap: 				4rem;
    margin:				var(--spacing-sm);
}

.searchgroup {
	display: 			flex;
	flex-direction:		column;
}

.mainsearch2 {
	display: 			flex;
	margin-top:			2rem;
	justify-content:	center;
	gap: 				1rem;
}

.legal {
	display: 			block;
}

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

@media (max-width: 700px) {
	.container {
		flex-direction: column;
	}
}

.container--ssr {
	margin-top:			2rem;
	border-radius:		0.6rem;
	padding:			1rem;
	background-color: 	var(--color-secondary); 
}


.image-section {
	width: 				clamp(190px, 29vw, 300px);
}

.image-section img {
	width: 				100%;
	height: 			auto;
	display: 			block;
}

.source {
	font-size: 			0.7em;
	color: 				var(--color-gray);
	margin: 			4px;
	margin-left: 		10px;
}

.bullet-section {
	flex: 			1;
}

.bullet-section ul {
	list-style-type:	circle;
	margin-left:		30px;
	padding-left: 		30px;
	font-size:			1.5rem;
}

.bullet-section ul li {
	margin-bottom:		20px;
}

.textNextToImage {
	flex: 			1;
	margin-left:		30px;
	padding-left: 		30px;
}

.more--ssr {
	color: 				var(--color-letter);
	font-size:			1rem;
	font-style:			italic;
}

.more--ssr a:link,
.more--ssr a:visited {
	color: 				var(--color-letter);
}

.infoIcon {
	position: 			relative;
	cursor: 			pointer;
	margin-left: 		5px;
  	font-size:			1.3rem;
 	font-weight:		bold;
	color:				var(--color-secondary);
}

.tooltip {
	visibility: 		hidden;
	width: 				350px;
	background: 		var(--color-secondary);
	color: 				var(--color-letter);
	text-align: 		center;
	margin:				0.6rem;
	border: 			var(--spacing-border) solid var(--color-border);
	border-radius: 		6px;
	border-color:		white;
	padding: 			8px;
	box-shadow: 		0.7rem 0.7rem 3px var(--color-gray);
	font-size:			1rem;
  	font-weight:		normal;
	position: 			absolute;
	top: 				25px;
	left: 				0;
	z-index: 			10;
}

.infoIcon:hover .tooltip,
.infoIcon:focus .tooltip {
	visibility: 		visible;
}

.mobileHide {
}

@media (max-width: 700px) {
	.mobileHide {
		display: 		none;
	}
}

#map { height: 400px; }