/**
 ** CSS Layout 
 **/


/* General */
html {
	background: rgb(135, 153, 183);
	color: rgb(14, 23, 38);
	height: 100%;
	scroll-padding-top: 25vh;
}

body {
	font-family: sans-serif;
	padding: 0px;
	margin: 0px;
	min-height: 100%;
	line-height: 150%;
	padding-bottom: 2rem;
}

.inner {
	background-color: rgb(235, 240, 246);
	margin: 0px auto;
	padding-bottom: 2vh;
	max-width: 75vw;
	box-shadow: 0px 0px 10px 5px;
}

div {
	padding: 2vh 2vw;
	margin: 1vh 1vw;
}
hr {
	width: 20vw;
	border-top: 0.25ch solid rgb(135, 153, 183);
	margin-left:10vw;
}
p.wichtig {
	font-size: 1.2rem;
	margin-block-start: 0.5rem;
	margin-block-end: 0.5rem;
	padding: 0.75vh 0.75vw;
	color: rgb(49, 76, 123);
	background-color: rgb(249, 251, 253);
	box-shadow: rgba(250, 250, 250, 0.308) 0 0 1rem;
	border-radius: 6px;
	text-align: center;
}

/* Überschriften */
h3, h4, h5, h6 {
	color: rgb(49, 76, 123);
	line-height: 150%;
	margin-block-start: 0.5rem;
	margin-block-end: 0.5rem;
}

h3 {
	font-size: 2rem;
}

h4 {
	font-size: 1.7rem;
}

h5 {
	font-size: 1.5rem;
}

h6 {
	font-size: 1.2rem;
}
h3:after{
	background-color: rgb(135, 153, 183);
	left: -0.2vw;
	bottom: 0.25rem;
	height: 0.25vh;
	width: 45vw;
	position: relative;
	content: "";
	display: block;
  }

/* Links */
a {
  	color: rgb(49, 76, 123);
}

a:hover{
  	text-decoration: underline;
}

/* Header */
div.header {
	border-radius: 0%;
	padding: 2rem;
	margin: 0px;
	background-color: rgb(41, 64, 104);
	display: flex;
	align-items: center;
	justify-content: center;
}

div.header div {
	margin: 0.5rem 1.5rem;
}

.header img {
	max-height: 5rem;
	color: rgb(230, 239, 253);
	filter: drop-shadow( 0px 0px 20px rgb(223, 235, 255)) drop-shadow( 0px 0px 2px rgb(223, 235, 255)) drop-shadow( 0px 0px 1px rgb(13, 20, 32));
}

.header h1 {
	text-align: center;
	font-size: 2.5rem;
	margin: 1.5rem;
	text-align: right;
}

.header h1 a {
	color: rgba(223, 235, 255, 0.818);
	text-shadow: rgb(13, 20, 32, 0.818) 0 0 0.5rem, rgb(223, 235, 255, 0.818) 0 0 1.5rem;
	text-decoration: None;
	text-align: right;
}

.header h2 {
	color: rgb(135, 153, 183);
	text-shadow: rgb(13, 20, 32, 0.818) 0 0 0.5rem, rgba(135, 153, 183, 0.485) 0 0 1rem;
	margin: 1.5rem;
	text-align: right;
}

nav.header {
	position: sticky;
	top: 0;
	background-color: rgb(27, 42, 69);
	padding: 1rem;
	box-shadow: inset 0px 0px 10px 5px, rgba(250, 250, 250, 0.308) 0 0 2rem;
	display: flex;
	align-items: center;
}

nav.header a {
	color: rgb(223, 235, 255);
	padding: 0 1.5rem;
	text-decoration: None;
}
#header-image{
	padding: 0 1.5rem;
} 
#header-image * {
	transform: scaleX(-1);
	max-height: 2rem;
}

/* Footer */
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	background-color: rgb(27, 42, 69);
	padding: 0;
	margin: 0 0 0 0 !important;
	height: 3.5rem;
	display: flex;
	align-items: center;
	box-shadow: rgba(250, 250, 250, 0.308) 0 0 2rem, inset 0px 0px 10px 5px;
}

.footer a {
	color: rgb(223, 235, 255);
	padding: 2vh 2vw;
	text-decoration: None;
	text-align: right;
	margin-left: auto; 
	margin-right: 0;
}

/* Stile und Listen */
.box {
	border-radius:6px;
	background-color: rgb(27, 42, 69);
	color: rgb(223, 235, 255);
	padding: 1vh 1vw;
	margin: 3vh 1.1vw;
	box-shadow: rgba(0, 0, 0, 0.444) 0 0 1rem;
}
.box *{
	color: rgb(223, 235, 255);
}
.box .begriffe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
}
.light, a.button.light {
	margin: 2vh 2vw;
	padding: 1vh 1vw;
	border-radius:6px;
	box-shadow: rgba(250, 250, 250, 0.308) 0 0 1rem;
	background-color: rgb(223, 235, 255);
	color: rgb(27, 42, 69);
	max-width: 40%;
}
.light * {
	color: rgb(27, 42, 69);
}
ul {
	margin-block-end: 0.5em;
}

/* Eingabe */
.buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
input, button, a.button {
	background-color: rgb(27, 42, 69);
	color: rgb(223, 235, 255);
	border-radius: 6px;
	border-style: none;
	display:inline-block;
	cursor:pointer;
	font-size:1.1rem;
	padding: 1vh 1vw;
  	margin: 1vh 0;
	margin-right: 1vw;
  	text-decoration: none;
	box-shadow: rgba(0, 0, 0, 0.444) 0 0 1rem;
}
form input {
	margin: 1.5vh 2vw;
}
input#suchbegriff {
	margin: 3vh 1.5vw;
	box-shadow: rgba(250, 250, 250, 0.308) 0 0 1rem;
	background-color: rgb(223, 235, 255);
	color: rgb(27, 42, 69);
}
input:hover, button:hover, a.button:hover {
	background-color:rgb(49, 76, 123);
	color: rgba(100, 148, 237, 0.808);
}
a.suchaufforderung{
	font-size:1.5rem;
}
a.button.klein{
	font-size:0.5rem;
}
#suchbegriff{
	background-color:#ffffff;
	color: black;
  	min-width: 50%;
	cursor: text;
}

/* Suchform */
form {
	padding: 2vh 2vw;
}
fieldset{
	border: none;
	margin: 1vh 1vw 0;
	margin-inline-start: auto;
	margin-inline-end: auto;
}
.form-check {
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color:rgb(41, 64, 104);
	border-radius: 6px;
	box-shadow: inset rgba(0, 0, 0, 0.278) 0 0 1rem;
}
.form-check div {
	margin: 1vh 1vw;
	padding: 1vh 1vw;
	width: 40%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
form input:hover, a.button.light:hover {
	box-shadow: inset rgba(0, 0, 0, 0.278) 0 0 1rem;
}
@media only screen and (max-width: 768px) {
	.form-check div {
		width: 100%;
	}
	input[type=checkbox]
	{
	  /* Double-sized Checkboxes */
	  -ms-transform: scale(2); /* IE */
	  -moz-transform: scale(2); /* FF */
	  -webkit-transform: scale(2); /* Safari and Chrome */
	  -o-transform: scale(2); /* Opera */
	  transform: scale(2);
	  padding: 10px;
	}
	h3, h4, h5, h6, p {
		margin-block-start: 0.25rem;
		margin-block-end: 0.25rem;
	}
}

/* Ausgabe */
div.suchergebnis {
	padding: 1vh 2vw;
}
div.suchergebnis h1, div.suchergebnis h2, div.suchergebnis h3, div.suchergebnis h4, div.suchergebnis h5, div.suchergebnis h6, div.suchergebnis h7, div.suchergebnis h8, div.suchergebnis p{
	line-height: 150%;
	margin-block-start: 0.25rem;
	margin-block-end: 0.25rem;
}
div.suchergebnis h1 {
	font-size: 3rem;
}
div.suchergebnis h2 {
	font-size: 2.5rem;
}
div.suchergebnis h3 {
	font-size: 2.2rem;
}
div.suchergebnis h4 {
	font-size: 2rem;
}
div.suchergebnis h5 {
	font-size: 1.8rem;
}
div.suchergebnis h6 {
	font-size: 1.6rem;
}
div.suchergebnis h7 {
	font-size: 1.4rem;
}
div.suchergebnis h8 {
	font-size: 1.2rem;
}
div.suchergebnis div{
	padding: 0.5vh 0;
	margin: 0.5vh 0;
}

/* Loader */
.overlay{
	padding: 0;
	margin: 0;
	position: fixed; /* Sit on top of the page content */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}
.loader {
	margin: 40vh auto;
	padding: 0;
	border: 2vw solid rgb(223, 235, 255);
	border-radius: 50%;
	border-top: 2vw solid rgb(49, 76, 123);
	width: 10vw;
	height: 10vw;
	animation: spinner 4s linear infinite;
  }
  
  @keyframes spinner {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }