:root{
	--primarycolor: #0059a2;
	--secondarycolor: #0f436c;
	--accentcolor: lightgrey;
}


body{
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS";
}

*{
	box-sizing: border-box;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                              supported by Chrome, Edge, Opera and Firefox */    	
}

a{
	color: inherit;
}

a:visited{
	color: inherit;
}

a.no_underline{
	text-decoration: none;
}

#headline{
	background-color: var(--primarycolor);
}

#burgerMenuCheckbox{
	display: none;
}
#burgerMenuIconOpen{
	display: block;
	font-size: 25pt; 
	color: #f2f2f2; 
	font-weight: bold;
	height: 50px;
}
#burgerMenuIconClose{
	display: none;
	font-size: 25pt; 
	color: #f2f2f2; 
	font-weight: bold;
	height: 50px;	
}
#burgerMenu{
	display: none;
	z-index: 999;
	padding-top: 5px;
}
#burgerMenuCheckbox:checked ~ #burgerMenuIconOpen{
	display: none;
}
#burgerMenuCheckbox:checked ~ #burgerMenuIconClose{
	display: block;
}
#burgerMenuCheckbox:checked ~ #burgerMenu{
	display: block;
	position: absolute;
	top: 50px;
	right: 0px;
	width: 100%;
	height: calc(100% - 50px);
	background-color: rgba(255,255,255,0.8);
}
.menuWrapper{
	background-color: var(--secondarycolor);
}
.menuLink{
   	display: flex; 
   	align-items: center;
	gap: 1em;
   	height: 50px;
   	padding: 15px;
}
.menuLink:not(:last-child){
	border-bottom: 1px solid var(--accentcolor);
}
.menuLinkIconWrapper{
	flex: 2;
	display: flex;
	justify-content: flex-end;
}
.menuLinkIcon{
	height: 32px;
	filter: invert(100%) sepia(14%) saturate(6071%) hue-rotate(178deg) brightness(110%) contrast(102%);
}
.menuLinkTextWrapper{
	flex: 3;
	color: white;
	font-weight: bolder;
}

.submenuToggle {
	display: none;
}
.submenuLink {
	background-color: var(--primarycolor);
}

/* ungeöffnetes Menü */
.submenuToggle + .submenuWrapper .submenuClosedWrapper{
	display: flex;
}
.submenuToggle + .submenuWrapper .submenuOpenWrapper{
	display: none;
}
.submenuToggle + .submenuWrapper .submenuLink{
	display: none;
}
/* ungeöffnetes Menü */

/* geöffnetes Menü */
.submenuToggle:checked + .submenuWrapper .submenuClosedWrapper{
	display: none;
}
.submenuToggle:checked + .submenuWrapper .submenuOpenWrapper{
	display: flex;
}
.submenuToggle:checked + .submenuWrapper .submenuLink{
	display: flex;
}
/* geöffnetes Menü */

.btn-large{
	background-color: var(--secondarycolor);
	border: 1px solid lightgrey;
	padding: 20px 100px;
	text-decoration: none;
	cursor: pointer;
	font-size: large;
	color: white;
	width: 100%;
}

.btn-medium{
	background-color: var(--secondarycolor);
	border: 1px solid lightgrey;
	padding: 10px 50px;
	text-decoration: none;
	cursor: pointer;
	font-size: large;
	color: white;
	width: 100%;
}

.btn-small{
	background-color: var(--secondarycolor);
	border: 1px solid lightgrey;
	padding: 5px 10px;
	text-decoration: none;
	cursor: pointer;
	font-size: large;
	color: white;
	width: 100%;
	font-size: small;
}

.btn-small:disabled, .btn-large:disabled, .btn-medium:disabled{
	background-color: var(--accentcolor);
	color: grey;
	cursor: default;
}

.btn-small.highlighted, .btn-large.highlighted, .btn-medium.highlighted{
	background-color: var(--primarycolor);
	cursor: default;
}

.input-medium{
	width: 100%;
	height: 5vh;

	/* Achtung! Wichtig für Scanner! Sonst kann man ins Inputfeld nichts schreiben */
    -webkit-touch-callout: auto; /* iOS Safari */
    -webkit-user-select: auto; /* Safari */
    -khtml-user-select: auto; /* Konqueror HTML */
    -moz-user-select: auto; /* Old versions of Firefox */
    -ms-user-select: auto; /* Internet Explorer/Edge */
    user-select: auto; /* Non-prefixed version, currently
                              supported by Chrome, Edge, Opera and Firefox */ 
}

.input-medium:read-only, .input-medium:disabled{
	background-color: var(--accentcolor);
	color: #646464;
	cursor: not-allowed;
}

dialog.ui-dialog {
	background: #fff;
	border: 1px solid #aaa;
	border-radius: 4px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	padding: 0;
}

dialog.ui-dialog a:focus-visible, dialog.ui-dialog button:focus-visible, dialog.ui-dialog input:focus-visible{
	outline: none;
}

dialog.ui-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}
dialog.ui-dialog .ui-dialog-titlebar {
	background: #f1f1f1;
	padding: 0.4em 0.8em;
	border-bottom: 1px solid #aaa;
	font-weight: bold;
}
dialog.ui-dialog .ui-dialog-content {
	padding: 1em;
}
dialog.ui-dialog .ui-dialog-buttonpane {
	background: #f1f1f1;
	padding: 0.5em 0.8em;
	border-top: 1px solid #aaa;
	text-align: right;
}

.headline{
	color: #f2f2f2;
	background-color: var(--primarycolor);
	padding: 10px;
	font-weight: bold;
}

.subheadline{
	color: var(--primarycolor);
	font-weight: bold;
}


/*Mobile First, Desktop Media Query*/
@media only screen and (min-width: 800px) {
	body{
		width: 600px;
		margin: 0 auto;
	}
	#burgerMenuCheckbox:checked ~ #burgerMenu{
		top: 50px;
		left: calc(50% - 300px);
		width: 600px;
	}
	dialog.ui-dialog {
		max-width: 550px;
	}
}