:root {
	
	color-scheme: dark;
	
	--bg-nav-hover: rgb(20, 20, 20);
	--bg-nav: rgb(32, 32, 32);
	--bg-content: rgb(44, 44, 44); /* Website Background #2C2C2C */
	--bg-form: rgb(64, 64, 64);
	
	--color-main: rgb(224, 224, 224);
	--color-decent: rgb(194, 194, 194);
	--color-decent2: rgb(164, 164, 164);
	
	--color-logo: #870E00;
	--color-headline: #FFA850;
	
	--width-nav: 12.5em;
	
	--font-headline: "Romeo", Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', sans-serif;
	--font-content: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
	--font-monospace: 'Courier New',Courier,'Lucida Sans Typewriter','Lucida Typewriter',monospace;
	
	--bg-btn-positive: green;
	--txt-color-positive: forestgreen;
	--bg-btn-negative: firebrick;
	--txt-color-negative: crimson;
	--bg-btn-neutral: rgb(64, 64, 64);
	
	--color-status-planned: #ffd700;
	
	--color-otherevent: #1981ea;
	--color-userschicht: #1981ea;
	--color-schichtplaninfos: #26C6FF;
	
	--scrollbar-width: 0px; /* wird mit JavaScript ueberschrieben */
}

@font-face{
	font-family: 'Romeo';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('/font/Romeo.eot');
	src: url('/font/Romeo.eot?#iefix') format('embedded-opentype'),
		url('/font/Romeo.woff2') format('woff2'),
		url('/font/Romeo.woff') format('woff'),
		url('/font/Romeo.ttf') format('truetype'),
		url('/font/Romeo.svg#Romeo') format('svg');
}

*,*:before,*:after,*::before,*::after {
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	height: 100%;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
}
body {
	height: 100%;
	font-size: 1em;
	line-height: 1.4;
	font-family: var(--font-content);
	-webkit-overflow-scrolling: touch;
	background: var(--bg-nav);
	color: var(--color-main);
	overflow: hidden;
	overflow-y: scroll;
	scrollbar-width: thin;
}
section,article,aside,footer,header,nav,hgroup {
	display: block;
}
article,aside,blockquote,body,center,dd,details,dialog,div,dl,dt,figure,figcaption,fieldset,footer,form,header,hr,html,h1,h2,h3,h4,h5,h6,label,legend,li,main,menu,nav,ol,p,pre,section,summary,ul {
	margin: 0;
	padding: 0;
}
ol,ul,li {
	list-style: none;
}
code,kbd,tt,var,samp,pre {
	font-family: var(--font-monospace);
	font-weight: normal;
	font-style: normal;
}
b,strong {
	font-weight: bold;
}
i,var,em,cite {
	font-style: italic;
}
a img {
	border: 0;
}
img {
	width: auto;
	height: auto;
	max-width: 100%;
}
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
h1,h2,h3,h4,h5,h6 {
	font: inherit;
	font-weight: normal;
}

a.hoverunderline:hover {
	text-decoration: underline;
}

.inputwrap {
	display: block;
	border-radius: 5px;
	background: var(--bg-form);
	color: var(--color-main);
	overflow: hidden;
}
.inputwrap.relative {
	position: relative;
}
.inputwrap textarea,
.inputwrap input:not([type="checkbox"]),
.inputwrap select {
	appearance: none;
	display: block;
	width: 100%;
	background: transparent;
	font: inherit;
	outline: none;
	border: none;
	color: inherit;
	line-height: inherit;
	margin: 0;
	border-radius: inherit;
	cursor: text;
}
.inputwrap.search {
	position: relative;
}
.inputwrap.search input:not([type="checkbox"]) {
	padding-right: 1.7em;
}
.inputwrap.search [role="button"] {
	position: absolute;
	top: 0.1em;
	right: 0.3em;
}
.inputwrap.hasAvatar {
	position: relative;
}
.inputwrap.hasAvatar input:not([type="checkbox"]) {
	padding-left: 2.2em;
}
.inputwrap.hasAvatar i.avatar {
	position: absolute;
	width: 1.75em;
	height: auto;
	top: 0;
	left: 0;
	bottom: 0;
	border-radius: 0;
}


input[type="file"]:focus-visible {
	outline: none;
}
input[type="file"] {
	max-width: 100%;
}


input[type="time"][data-empty="true"]:not(:focus) {
	color: transparent;
}
.inputwrap input[type="time"][data-empty="true"]:not(:focus) {
	opacity: 0.1;
}


.inputwrap textarea {
	height: 5em;
	padding: 0.3em 0.5em;
	resize: vertical;
}
.inputwrap textarea.l {
	height: 7.5em;
}
.inputwrap textarea.xl {
	height: 10em;
}
.inputwrap textarea.htmleditor {
	height: 10em;
	background: var(--bg-content);
}
.inputwrap input:not([type="checkbox"]),
.inputwrap select {
	height: 1.75em;
	padding: 0 0.5em 0.1em 0.5em;
}
.inputwrap input[type="color"] {
	padding: 0;
	cursor: pointer;
	border: 3px solid transparent;
}
.inputwrap input[type="color"]::-moz-color-swatch {
	border: none;
}
.inputwrap input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
	border-radius: 0;
}
.inputwrap input[type="color"]::-webkit-color-swatch {
	border: none;
}
.inputwrap select {
	background-color: var(--bg-form);
	background-image: url(select-arrow.svg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: calc(100% - 0.35em) 0.35em;
	background-size: 1em 1em;
	cursor: pointer;
}

.checkboxwrap label {
	display: block;
	position: relative;
}
.checkboxwrap label input[type="checkbox"] {
	display: block;
	width: 1px;
	height: 1px;
	opacity: 0;
	position: absolute;
	left: -9999px;
	z-index: -1;
	appearance: none;
	pointer-events: none;
}
.checkboxwrap label input[type="checkbox"]:focus {
	outline: none;
}
.checkboxwrap label input[type="checkbox"] + span.checkbox {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-top: 0.1em;
	border-radius: 3px;
	background: var(--bg-form);
	border: 1px solid rgba(255, 255, 255, 0.2);
	position: relative;
	vertical-align: top;
	cursor: pointer;
}
.checkboxwrap label input[type="checkbox"]:checked + span.checkbox {
	border-color: transparent;
	background: var(--color-main);
}
.checkboxwrap label input[type="checkbox"]:checked + span.checkbox::after {
	content: '';
	position: absolute;
	left: 0.31em;
	top: 0px;
	width: 0.5em;
	height: 0.9em;
	border: solid var(--bg-nav);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

button {
	font: inherit;
	color: var(--color-main);
	line-height: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	background: var(--bg-btn-neutral);
	padding: 0.5em 1.5em;
	display: block;
	border: none;
	margin: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	outline: 0;
	text-decoration: none;
	text-transform: none;
	overflow: visible;
	border-radius: 3px;
	box-shadow: inset 0 0 0 10000rem rgba(255,255,255,0);
	transition: all 0.3s;
}
button.positive {
	background: var(--bg-btn-positive);
}
button.negative {
	background: var(--bg-btn-negative);
}
button.highlight {
	background: var(--color-headline);
	color: var(--bg-content);
}
button:hover {
	box-shadow: inset 0 0 0 10000rem rgba(255,255,255,0.05);
}
button.positive:hover,
button.negative:hover {
	box-shadow: inset 0 0 0 10000rem rgba(255,255,255,0.1);
}
button:disabled {
	opacity: 0.5;
}

a {
	font: inherit;
	color: var(--color-main);
	text-decoration: none;
	transition: color  0.3s, text-decoration  0.3s, border 0.3s, box-shadow 0.3s, text-shadow 0.3s, opacity 0.3s, filter 0.3s, background 0.3s;
}
a:not(.highlight):focus-visible {
	outline: 2px solid var(--color-headline);
}
a.highlight:focus-visible {
	outline: none;
	text-decoration: underline;
}
a.highlight {
	color: var(--color-headline);
}
a.highlight:hover {
	text-decoration: underline;
}

.color-status-planned {
	color: var(--color-status-planned);
}

.linethrough {
	text-decoration: line-through;
}
.uppercase {
	text-transform: uppercase;
}

.breakall {
	word-break: break-all;
}

.highlight:not(a):not(button) {
	color: var(--color-headline);
}

.positive:not(button) {
	color: var(--txt-color-positive);
}

.negative:not(button) {
	color: var(--txt-color-negative);
}

.bgpositive:not(button) {
	background: var(--bg-btn-positive);
}
.bgnegative:not(button) {
	background: var(--bg-btn-negative);
}
.bgneutral:not(button) {
	background: var(--bg-btn-neutral);
}


#api_clients {
	z-index: 950;
	position: fixed;
	top: 0em;
	right: 0;
}
#api_clients i.avatar {
	position: relative;
	top: -0.2em;
}
@media all and (min-width:1025px) {
	#api_clients {
		left: 0;
	}
}
@media all and (max-width:1024px) {
	#api_clients {
		left: 2.8em;
		border-bottom-left-radius: 0.5em;
	}
}

#hamburger-close-btn,
#hamburger-close-area,
#hamburger-open-btn {
	display: none;
}
#sidebar {
	position: fixed;
	z-index: 900;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--width-nav);
	
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: max-content auto max-content;
}
#sidebar > * {
	overflow: hidden;
}
#sidebar #logo {
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}
#sidebar nav {
	grid-column: 1 / span 1;
	grid-row: 2 / span 1;
	overflow: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
}
#sidebar #scrolltotop-button {
	grid-column: 1 / span 1;
	grid-row: 3 / span 1;
	opacity: 1;
	transition: opacity 0.3s;
}
#sidebar #scrolltotop-button.hide {
	opacity: 0;
}
#sidebar-calendar {
	display: none;
}
@media all and (min-width:1025px) and (min-height:900px) {
	#sidebar-calendar {
		display: block;
		margin: 0 0.75em;
	}
	#sidebar-calendar a {
		display: inline-block;
		margin-top: 0.1em;
	}
	#sidebar-calendar a:hover {
		text-decoration: underline;
	}
}

@media all and (max-width:1024px) {
	
	#hamburger-open-btn {
		display: block;
		position: fixed;
		z-index: 700;
		top: 0.175em;
		left: 0.5em;
		color: var(--color-decent);
		font-size: 1.5em;
	}
	#hamburger-close-btn {
		display: block;
		background: var(--bg-nav-hover);
		color: var(--color-headline);
		padding: 0.7em 0.5em;
		white-space: nowrap;
	}
	#hamburger-close-area {
		display: block;
		position: fixed;
		z-index: 800;
		top: 0;
		left: var(--width-nav);
		right: 0;
		bottom: 0;
		background: rgba(50,50,50,0.5);
		cursor: pointer;
		transform: translate(calc((100vw - var(--width-nav))), 0);
		transition: transform 0.3s ease-in;
	}
	#sidebar {
		background: var(--bg-nav);
		transform: translate(calc(var(--width-nav) * -1), 0);
		transition: transform 0.3s ease-in;
	}
	#hamburger-open-btn[aria-expanded="true"] + #sidebar {
		transform: translate(0, 0);
	}
	#hamburger-open-btn[aria-expanded="true"] + #sidebar + #hamburger-close-area {
		transform: translate(0, 0);
	}
	#sidebar #logo,
	#sidebar #scrolltotop-button {
		display: none;
	}
}
@media all and (min-width:1280px) {
	#sidebar {
		left: calc((100% - (1280px - var(--scrollbar-width))) / 2);
	}
}



#header {
	position: fixed;
	top: 0;
	z-index: 600;
	background: var(--bg-content);
}
@media all and (min-width:1025px) {
	#header {
		left: var(--width-nav);
		right: 0;
		border-top-left-radius: 1em;
	}
}
@media all and (min-width:1280px) {
	#header {
		left: calc(((100% - (1280px - var(--scrollbar-width))) / 2) + var(--width-nav));
		right: calc(((100% - (1280px - var(--scrollbar-width))) / 2));
	}
}
@media all and (max-width:1024px) {
	#header {
		left: 0;
		right: 0;
	}
	#header h1 {
		padding-left: 1.9em;
	}
}



#content {
	min-height: 100%;
	max-width: calc(1280px - var(--width-nav));
	background: var(--bg-content);
	padding: 4em 2em 2em 2em;
}
@media all and (min-width:1025px) {
	#content {
		margin-left: var(--width-nav);
		border-top-left-radius: 1em;
		border-bottom-left-radius: 1em;
	}
}
@media all and (min-width:1280px) {
	#content {
		margin-left: calc(((100% - (1280px - var(--scrollbar-width))) / 2) + var(--width-nav));
	}
}
@media all and (max-width:1024px) {
	#content {
		margin-left: 0;
		padding-left: 1em;
		padding-right: 1em;
	}
}
@media all and (max-width:800px) {
	#content {
		margin-left: 0;
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
}

#scrolltotop-button i,
#sidebar ul i {
	width: 2em;
	text-align: center;
}
#scrolltotop-button,
#sidebar ul a {
	display: block;
	background: transparent;
	padding: 0.5em;
	cursor: pointer;
	white-space: nowrap;
}
#scrolltotop-button,
#sidebar ul a {
	color: var(--color-decent2);
}
#scrolltotop-button:focus-visible,
#sidebar ul a:focus-visible {
	outline-offset: -4px;
}
#scrolltotop-button:hover,
#sidebar ul a[aria-current="page"],
#sidebar ul a:hover {
	background: var(--bg-nav-hover);
	color: var(--color-main);
}
@media all and (max-width:1024px) {
	#sidebar ul a {
		color: var(--light);
		padding: 0.7em 0.5em;
	}
	#sidebar ul a[aria-current="page"],
	#sidebar ul a:hover {
		background: transparent;
		color: var(--light);
	}
}
#sidebar ul[aria-hidden="true"] {
	display: none;
}
#sidebar ul ul a {
	font-size: 0.9em;
	padding-left: 1.5em;
}
#sidebar #logo {
	font-size: 1.5em;
	text-transform: uppercase;
	color: var(--color-logo);
	font-family: var(--font-headline);
	white-space: nowrap;
	overflow: hidden;
	text-align: right;
	padding-top: calc(0.35em / 1.5 * 1);
	padding-bottom: calc(0.3em / 1.5 * 1);
	padding-right: calc(0.75em / 1.5 * 1);
}



#header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	gap: 1.5em;
	padding: 0.4em 1em 0.3em 0.75em;
}
#header a {
	color: var(--color-decent2);
}
#header a:hover {
	color: var(--color-main);
}
#header aside {
	padding-top: 0.1em;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	gap: 1.5em;
}
#header aside > * {
	white-space: nowrap;
}
@media all and (max-width:800px) {
	#header a {
		color: var(--color-decent);
	}
	#header aside span {
		display: none;
	}
}
.headline,
#header h1 {
	font-size: 1em;
	color: var(--color-decent2);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.highlightheadline {
    font-size: 1.5em;
	color: var(--color-headline);
	font-family: var(--font-headline);
	text-transform: uppercase;
}
#header h1 {
	position: relative;
	top: -0.2em;
}
#header aside i {
	display: inline-block;
	margin-right: 0.4em;
}
i.avatar {
	display: inline-block;
	border-radius: 100%;
	width: 2em;
	height: 2em;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	vertical-align: top;
}
i.avatar.xl {
	width: 6em;
	height: 6em;
}
#header aside i.avatar {
	position: relative;
	top: -0.2em;
}



.tabs-wrap [role="tablist"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	overflow: hidden;
	box-shadow: inset 0 -2px 0 0 var(--bg-nav);
	padding: 0 0.5em;
}
.tabs-wrap [role="tablist"] [role="tab"] {
	cursor: pointer;
	padding: 0.3em 0.5em;
	user-select: none;
}
.tabs-wrap [role="tablist"] [role="tab"] {
	border: 2px solid transparent;
}
.tabs-wrap [role="tablist"] [role="tab"][aria-selected="true"] {
	color: var(--color-headline);
	background: var(--bg-content);
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	border-color: var(--bg-nav);
	border-bottom-color: var(--bg-content);
}
.tabs-wrap [role="tabpanel"][aria-hidden="true"] {
	display: none;
}

.tablewrap {
	overflow-x: auto;
	scrollbar-width: thin;
}
table {
	width: 100%;
	border-collapse: collapse;
	border: none;
}
table th {
	text-align: left;
	font-weight: normal;
	background: rgba(0,0,0,0.2);
	padding: 0.4em 0.5em;
	color: var(--color-decent2);
}
table td {
	text-align: left;
	padding: 0.4em 0.5em;
}
table tr:nth-child(odd) td {
	background: rgba(255,255,255,0.04);
}

.bold {
	font-weight: bold;
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

[role="button"] {
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.box {
	padding: 1em;
	background: var(--bg-content);
	border-radius: 5px;
}

#content .box {
	background: var(--bg-nav);
}

.block {
	display: block;
}
.inlineblock {
	display: inline-block;
}
.inline {
	display: inline;
}

.loading {
	background-image: url('/img/loader-hourglass.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 64px 64px;
}

.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
}

.flex.spacebetween {
	justify-content: space-between;
}
.flex.spaceevenly {
	justify-content: space-evenly;
}
.flex.spacearound {
	justify-content: space-around;
}
.flex.right {
	justify-content: flex-end;
}
.flex.center {
	justify-content: center;
}

.flex.vcenter {
	align-content: center;
}

.flex.top {
	align-items: flex-start;
}
.flex.stretch {
	align-items: stretch;
}
.flex.nowrap {
	flex-wrap: nowrap;
	max-width: 100%;
}
@media all and (max-width:800px) {
	.flex.nowrap_mobile {
		flex-wrap: nowrap;
		max-width: 100%;
	}
	.nowrap_mobile:not(.flex) {
		white-space: nowrap;
	}
}
@media all and (min-width:801px) {
	.flex.nowrap_desktop {
		flex-wrap: nowrap;
		max-width: 100%;
	}
	.nowrap_desktop:not(.flex) {
		white-space: nowrap;
	}
}

@media all and (max-width:800px) {
	.desktop {
		display: none;
	}
}
@media all and (min-width:801px) {
	.mobile {
		display:none;
	}
}

.nowrap:not(.flex) {
	white-space: nowrap;
}
.flex.col {
	flex-direction: column;
}
.flex.col.left {
	align-items: flex-start;
}

.flex .grow1 { flex-grow: 1; }
.flex .grow2 { flex-grow: 2; }
.flex .grow3 { flex-grow: 3; }
.flex .grow4 { flex-grow: 4; }

.flex.gap05 { gap: 0.25rem;	}
.flex.gap1 { gap: 0.5rem;	}
.flex.gap2 { gap: 1rem;	}
.flex.gap3 { gap: 1.5rem; }
.flex.gap4 { gap: 2rem;	}
.flex.gap5 { gap: 2.5rem; }

.flex.rgap05 { row-gap: 0.25rem;	}
.flex.rgap1 { row-gap: 0.5rem;	}
.flex.rgap2 { row-gap: 1rem;	}
.flex.rgap3 { row-gap: 1.5rem; }
.flex.rgap4 { row-gap: 2rem;	}
.flex.rgap5 { row-gap: 2.5rem; }

.flex.cgap05 { column-gap: 0.25rem;	}
.flex.cgap1 { column-gap: 0.5rem;	}
.flex.cgap2 { column-gap: 1rem;	}
.flex.cgap3 { column-gap: 1.5rem; }
.flex.cgap4 { column-gap: 2rem;	}
.flex.cgap5 { column-gap: 2.5rem; }


.hrt05,
.hrt1,
.hrt2,
.hrt3,
.hrt4,
.hrt5 {
	position: relative;
}
.hrt05::after,
.hrt1::after,
.hrt2::after,
.hrt3::after,
.hrt4::after,
.hrt5::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: rgba(255,255,255,0.1);
}
.hrt05::after { top: -0.125rem; }
.hrt1::after { top: -0.25rem; }
.hrt2::after { top: -0.5rem; }
.hrt3::after { top: -0.75rem; }
.hrt4::after { top: -1rem; }
.hrt5::after { top: -1.25rem; }

.hrb05,
.hrb1,
.hrb2,
.hrb3,
.hrb4,
.hrb5 {
	position: relative;
}
.hrb05::after,
.hrb1::after,
.hrb2::after,
.hrb3::after,
.hrb4::after,
.hrb5::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(255,255,255,0.1);
}
.hrb05::after { bottom: -0.125rem; }
.hrb1::after { bottom: -0.25rem; }
.hrb2::after { bottom: -0.5rem; }
.hrb3::after { bottom: -0.75rem; }
.hrb4::after { bottom: -1rem; }
.hrb5::after { bottom: -1.25rem; }

.lh1 { line-height: 1; }

.mw100 { max-width: 6.25em; overflow: hidden; text-overflow: ellipsis; }
.mw150 { max-width: 9.375em; overflow: hidden; text-overflow: ellipsis; }
.mw200 { max-width: 12.5em; overflow: hidden; text-overflow: ellipsis; }
.mw300 { max-width: 18.75em; overflow: hidden; text-overflow: ellipsis; }
.mw400 { max-width: 25em; overflow: hidden; text-overflow: ellipsis; }
.maxw100 { max-width: 6.25em; overflow: hidden; text-overflow: ellipsis; }
.maxw150 { max-width: 9.375em; overflow: hidden; text-overflow: ellipsis; }
.maxw200 { max-width: 12.5em; overflow: hidden; text-overflow: ellipsis; }
.maxw300 { max-width: 18.75em; overflow: hidden; text-overflow: ellipsis; }
.maxw400 { max-width: 25em; overflow: hidden; text-overflow: ellipsis; }

.minw100 { min-width: 6.25em; }
.minw150 { min-width: 9.375em; }
.minw200 { min-width: 12.5em; }
.minw300 { min-width: 18.75em; }
.minw400 { min-width: 25em; }

.mh10vh { max-height: 10vh; overflow: hidden; overflow-y: auto; }
.mh20vh { max-height: 20vh; overflow: hidden; overflow-y: auto; }
.mh30vh { max-height: 30vh; overflow: hidden; overflow-y: auto; }
.mh40vh { max-height: 40vh; overflow: hidden; overflow-y: auto; }
.mh50vh { max-height: 50vh; overflow: hidden; overflow-y: auto; }
.mh60vh { max-height: 60vh; overflow: hidden; overflow-y: auto; }
.mh70vh { max-height: 70vh; overflow: hidden; overflow-y: auto; }
.mh80vh { max-height: 80vh; overflow: hidden; overflow-y: auto; }
.mh90vh { max-height: 90vh; overflow: hidden; overflow-y: auto; }

.w10 { width: 0.625em; max-width: 100%; }
.w15 { width: 0.9375em; max-width: 100%; }
.w20 { width: 1.25em; max-width: 100%; }
.w25 { width: 1.5625em; max-width: 100%; }
.w30 { width: 1.875em; max-width: 100%; }
.w35 { width: 2.1875em; max-width: 100%; }
.w40 { width: 2.5em; max-width: 100%; }
.w45 { width: 2.8125em; max-width: 100%; }
.w50 { width: 3.125em; max-width: 100%; }
.w55 { width: 3.4375em; max-width: 100%; }
.w60 { width: 3.75em; max-width: 100%; }
.w65 { width: 4.0625em; max-width: 100%; }
.w70 { width: 4.375em; max-width: 100%; }
.w75 { width: 4.6875em; max-width: 100%; }
.w80 { width: 5em; max-width: 100%; }
.w85 { width: 5.3125em; max-width: 100%; }
.w90 { width: 5.625em; max-width: 100%; }
.w95 { width: 5.9375em; max-width: 100%; }
.w100 { width: 6.25em; max-width: 100%; }
.w125 { width: 7.8125em; max-width: 100%; }
.w150 { width: 9.375em; max-width: 100%; }
.w200 { width: 12.5em; max-width: 100%; }
.w250 { width: 15.625em; max-width: 100%; }
.w300 { width: 18.75em; max-width: 100%; }
.w350 { width: 21.875em; max-width: 100%; }
.w400 { width: 25em; max-width: 100%; }
.w450 { width: 28.125em; max-width: 100%; }
.w500 { width: 31.25em; max-width: 100%; }
.w550 { width: 34.375em; max-width: 100%; }
.w600 { width: 37.5em; max-width: 100%; }
.w650 { width: 40.625em; max-width: 100%; }
.w700 { width: 43.75em; max-width: 100%; }
.w750 { width: 46.875em; max-width: 100%; }
.w800 { width: 50em; max-width: 100%; }

.w5p { width: 5%; }
.w10p { width: 10%; }
.w15p { width: 15%; }
.w20p { width: 20%; }
.w25p { width: 25%; }
.w30p { width: 30%; }
.w33p { width: 33.333%; }
.w35p { width: 35%; }
.w40p { width: 40%; }
.w45p { width: 45%; }
.w50p { width: 50%; }
.w55p { width: 55%; }
.w60p { width: 60%; }
.w65p { width: 65%; }
.w70p { width: 70%; }
.w75p { width: 75%; }
.w80p { width: 80%; }
.w85p { width: 85%; }
.w90p { width: 90%; }
.w95p { width: 95%; }
.w100p { width: 100%; }
.h100p { min-height: 100%; }
.h100content { min-height: calc(100vh - 7rem); } /* - topbar und paddingcontent */

.decent, .decent a {
	color: var(--color-decent2);
}
.selected, .selected a  {
	color: var(--color-headline);
}

#msg {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	transition: transform 0.8s ease-in-out;
	box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.65);
	border-bottom-right-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	margin: 0 auto;
	max-width: 600px;
	overflow: hidden;
}
#msg.hide {
	transform: translateY(calc(-100% - 45px));
}

.displaynone {
	display:none;
}
.overflowhidden {
	overflow: hidden;
	text-overflow: ellipsis;
}
.msg-success,
.msg-error {
	padding: 0.5em 1em;
}
.msg-error {
	background: var(--bg-btn-negative);
}
.msg-success {
	background: var(--bg-btn-positive);
}
.small {
	font-size: 0.85em;
}



.mb0 { margin-bottom: 0; }
.mb05 { margin-bottom: 0.25rem; }
.mb1 { margin-bottom: 0.5rem; }
.mb2 { margin-bottom: 1rem; }
.mb3 { margin-bottom: 1.5rem; }
.mb4 { margin-bottom: 2rem; }
.mb5 { margin-bottom: 2.5rem; }
.mb6 { margin-bottom: 3rem; }
.mb7 { margin-bottom: 3.5rem; }
.mb8 { margin-bottom: 4rem; }

.mt0 { margin-top: 0; }
.mt05 { margin-top: 0.25rem; }
.mt1 { margin-top: 0.5rem; }
.mt2 { margin-top: 1rem; }
.mt3 { margin-top: 1.5rem; }
.mt4 { margin-top: 2rem; }
.mt5 { margin-top: 2.5rem; }
.mt6 { margin-top: 3rem; }
.mt7 { margin-top: 3.5rem; }
.mt8 { margin-top: 4rem; }

.mr0 { margin-right: 0; }
.mr05 { margin-right: 0.25rem; }
.mr1 { margin-right: 0.5rem; }
.mr2 { margin-right: 1rem; }
.mr3 { margin-right: 1.5rem; }
.mr4 { margin-right: 2rem; }
.mr5 { margin-right: 2.5rem; }
.mr6 { margin-right: 3rem; }
.mr7 { margin-right: 3.5rem; }
.mr8 { margin-right: 4rem; }

.ml0 { margin-left: 0; }
.ml05 { margin-left: 0.25rem; }
.ml1 { margin-left: 0.5rem; }
.ml2 { margin-left: 1rem; }
.ml3 { margin-left: 1.5rem; }
.ml4 { margin-left: 2rem; }
.ml5 { margin-left: 2.5rem; }
.ml6 { margin-left: 3rem; }
.ml7 { margin-left: 3.5rem; }
.ml8 { margin-left: 4rem; }

.m0 { margin: 0; }
.m05 { margin: 0.25rem; }
.m1 { margin: 0.5rem; }
.m2 { margin: 1rem; }
.m3 { margin: 1.5rem; }
.m4 { margin: 2rem; }
.m5 { margin: 2.5rem; }
.m6 { margin: 3rem; }
.m7 { margin: 3.5rem; }
.m8 { margin: 4rem; }

.br0 { border-radius: 0; }
.br1 { border-radius: 0.25em; }
.br2 { border-radius: 0.5em; }
.br3 { border-radius: 0.75em; }
.br4 { border-radius: 1em; }

.pb0 { padding-bottom: 0; }
.pb05 { padding-bottom: 0.25rem; }
.pb1 { padding-bottom: 0.5rem; }
.pb2 { padding-bottom: 1rem; }
.pb3 { padding-bottom: 1.5rem; }
.pb4 { padding-bottom: 2rem; }
.pb5 { padding-bottom: 2.5rem; }

.pt0 { padding-top: 0; }
.pt05 { padding-top: 0.25rem; }
.pt1 { padding-top: 0.5rem; }
.pt2 { padding-top: 1rem; }
.pt3 { padding-top: 1.5rem; }
.pt4 { padding-top: 2rem; }
.pt5 { padding-top: 2.5rem; }

.pr0 { padding-right: 0; }
.pr05 { padding-right: 0.25rem; }
.pr1 { padding-right: 0.5rem; }
.pr2 { padding-right: 1rem; }
.pr3 { padding-right: 1.5rem; }
.pr4 { padding-right: 2rem; }
.pr5 { padding-right: 2.5rem; }

.pl0 { padding-left: 0; }
.pl05 { padding-left: 0.25rem; }
.pl1 { padding-left: 0.5rem; }
.pl2 { padding-left: 1rem; }
.pl3 { padding-left: 1.5rem; }
.pl4 { padding-left: 2rem; }
.pl5 { padding-left: 2.5rem; }

.p0 { padding: 0; }
.p05 { padding: 0.25rem; }
.p1 { padding: 0.5rem; }
.p2 { padding: 1rem; }
.p3 { padding: 1.5rem; }
.p4 { padding: 2rem; }
.p5 { padding: 2.5rem; }



dialog {
	position: fixed;
	margin: 0;
	color: inherit;
	font: inherit;
	line-height: inherit;
	background: var(--bg-content);
	border: none;
	border-radius: 1em;
	box-shadow: 0 0 0 10000em rgba(0,0,0,0.6);
	top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
dialog header {
	font-size: 1.5em;
	text-transform: uppercase;
	color: var(--color-headline);
	font-family: var(--font-headline);
	background: var(--bg-nav);
	padding: 0.5em 0.75em;
}
dialog:focus,
dialog:focus-visible,
dialog header:focus,
dialog header:focus-visible {
	outline: none;
}
dialog header h2 {
	margin-right: 1em;
}
dialog header a.closedialog {
	line-height: 1;
	display: block;
	position: absolute;
	top: 0.6em;
	right: 0.75em;
	cursor: pointer;
	color: var(--color-decent2);
}
dialog > section {
	padding: 0.5em 2em 2em 2em;
}
dialog .formitem {
	margin: 1em 0;
}
dialog .formbuttons {
	margin-top: 2em;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: flex-start;
	gap: 1em;
}


tr.cm-hover td:not(.event-color) {
	background-color: var(--bg-nav) !important;
}
.cm-hover.event:not(tr) {
	transform: scale(1.05);
}
#dienstplaene_wrapper .cm-hover {
	border-color: rgba(255,255,255,0.3) !important;
}
#dashboardlist .cm-hover {
	background-color: rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 0 0.75em rgba(0,0,0,0.3);
	box-shadow: 0 0 0 0.75em rgba(0,0,0,0.3);
}


.context-menu-dialog {
	font-size: 0.95em;
}
.context-menu-dialog, .submenu {
	background-color: var(--bg-nav);
	border: 1px solid var(--bg-nav);
	color: var(--color-main);
}
.context-menu-dialog ul li a {
	color: inherit;
}
.context-menu-dialog ul li:hover {
	background-color: var(--bg-nav-hover);
}
.context-menu-dialog [role="button"] {
	cursor: pointer;
}

#autocomplete {
	display: block;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	max-width: 100px;
	max-height: 100px;
	
	overflow: hidden;
	overflow-y: scroll;
	scrollbar-width: thin;
	
	background-color: var(--bg-nav);
	border: 1px solid var(--bg-nav);
	color: var(--color-main);
	border-radius: 5px;
	box-shadow: 2px 5px 10px rgba(0,0,0,0.8);
}
#autocomplete li > * {
	pointer-events: none;
}
#autocomplete li:hover {
	background-color: var(--bg-nav-hover);
}