/*Elemente*/
body
{
	margin: 0px auto;
	font-family: arial, tahoma, helvetica;
	background: var(--HintergrundDetail);
}
header #ergebnisSuche .Link 	{padding: var(--AbstandHalb);}
main				{display: flex; flex-direction: column; gap: var(--Abstand);}
#detail, #liste 	{min-height: 100dvh;}
#applikation 		{padding-bottom: 90vh;}
.Klasse.Detail 		{display: flex; flex-direction: column; gap: var(--Abstand);}
aside 				{display: flex; flex-direction: column; flex: 1;}
aside .Gegenstand 	{white-space: pre;}
aside .Liste 		{gap: 0;}
aside img.icon 		{width: 32px; height: 32px;}
img 				{vertical-align: bottom; border-radius: var(--RadiusViertel);}
table, p, h1, h2, h3, h4, h5, label 	{margin: 0px; padding: 0px;}
h1 b, h1 strong, h2 b, h2 strong 		{font-weight: bold;}
ul 					{padding-left: var(--Abstand);}
th 					{text-align: left; white-space: nowrap; padding: 5px;}
td 					{padding: 5px; vertical-align: top;}
thead td 			{width: 0;}
video, audio 		{width: 100%; max-width: 100%; max-height: 70vh; background: var(--Rauchglas)}
*:focus-visible		{outline: var(--Outline); z-index: 99; outline-offset: -2px;}
.Outline 			{outline: var(--Outline); z-index: 99; outline-offset: 2px;}
:is(button, .Button):focus-visible 	{outline-offset: 2px;}
.platzhalter 		{padding: 0px 3px 0px 3px; background-color: #D1E0EE; color: #888; border-radius: 3px;}
nav 				{display: flex; gap: var(--Abstand); flex-wrap: wrap;}
nav a.aktuell 		{overflow: hidden; padding: 5px var(--Abstand);}
fieldset 			{border-width: 0; padding: 0; margin: 0; width: 100%;}
svg 				{vertical-align: bottom;}
.Button.svg
, button.svg 		{color: var(--LinkColor); fill: var(--LinkColor); background: none;}
h1
{
	display: flex;
	align-items: center;
	font-size: 2rem;
	font-weight: normal;
	position: relative;
}
#Kopf h1 {font-size: 1rem;}
section {margin-bottom: calc(var(--Abstand) * -1);}
/*allgemeine Klassen*/
body .Ereignis > .Inhalt {flex: 1;}
.Auswahl 				{padding: var(--AbstandViertel); border-radius: var(--RadiusViertel);}
body > .Liste 			{border-radius: var(--Radius); overflow: hidden; gap: 1px;}
.Kette 					{display: flex; flex-wrap: wrap; gap: var(--Abstand); max-width: max-content;}
.icon 					{height: 32px; width: 32px;}
.Buttons 										{gap: var(--AbstandViertel);}
.Storniert
, .Kompaktdarstellung.offline 					{filter: grayscale(1);}
.Baum
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	padding-left: calc(var(--Abstand) * 6);
}
.Listenseite 			{margin: 0 auto;}
.Klasse.Detail #Kopf {grid-column: 1/-1;}
.Klasse.Detail .Kopf
{
	position: relative;
	display: flex;
	gap: var(--Abstand);
}
.Listenseitencontainer 						{max-width: 100%; align-self: normal; margin: 0 auto;}
.Indikator
{
	align-self: center;
	padding: 5px;
	border-radius: 50%;
	background: green;
}
.IndikatorLink
{
	align-self: center;
	padding: 5px;
	background: var(--LinkColor);
}
.Button .Indikator {background: white; border-radius: 0;}
.Indikatoren
{
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-radius: var(--RadiusViertel);
	gap: 1px;
	max-width: 131px;
}
.Eigenschaften
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
}
.Eigenschaften > .Eigenschaft
{
	display: grid;
	grid-template-columns: 100%;
	gap: var(--Abstand);
}
.hervorheben 					{font-weight: bold;}
.Beschriftung label:after 		{content: ":";}
.Beschriftung .Darkerpanel 		{margin-left: var(--Abstand); max-width: 300px;}
.Flags 							{display: flex; flex-wrap: wrap; gap: var(--AbstandViertel);}
.dragpanel
{
	border-radius: var(--RadiusViertel);
	min-width: var(--Abstand);
	min-height: var(--Abstand);
	background: var(--DunklerHintergrund);
	cursor: move;
	align-self: normal;
}
.Mitarbeiterliste img 			{object-fit: cover;}
table.Auswahl th:first-child 	{width: 1%;}
.HintergrundRot 				{background-color: var(--HintergrundRot);}
.HintergrundGruen 				{background-color: var(--HintergrundGruen);}
.HintergrundOrange 				{background-color: var(--HintergrundOrange);}
.breit 							{flex: 1;}
/*Klassen*/
.LiegtIn :is(picture, .Flag) {display: none;}
.LiegtIn .MID {max-width: 300px;}
.LiegtIn .MID span {text-overflow: ellipsis; overflow: hidden;}
a.Burger,
a.Burger:visited,
a.Burger:hover,
a.Burger:focus,
a.Burger:focus-visible,
a.Burger:active
{
	position: fixed;
	bottom:  var(--Abstand);
	right: var(--Abstand);
	background: #414244;
	color: white;
	fill: white;
	border-radius: var(--RadiusViertel);
	backdrop-filter: blur(4px);
	padding: var(--AbstandHalb);
	z-index: 999;
}
.Kollaboration 					{max-width: max-content; margin: auto;}
.Attribute 						{display: flex; flex-direction: column; gap: var(--Abstand);}
.Trennlinie 					{border-top: solid 1px var(--BorderColor); padding-top: var(--Abstand);}
.NachrichtInhalt
, .KonversationNachrichtInhalt 	{overflow-wrap: anywhere;}
:is(#Objekte, #Reports, #Applikationen, header) .Steuerelemente 			{display: none; flex-wrap: nowrap;}
:is(#Objekte, #Reports, #Applikationen).in_bearbeitung .Steuerelemente 		{display: flex;}
:is(#Objekte, #Reports, #Applikationen) #applikationsreferenzen_auswahl 	{display: none;}
:is(#Objekte, #Reports, #Applikationen).in_bearbeitung #applikationsreferenzen_auswahl {display: block;}
.Applikationsreferenzen 		{display: flex; flex-direction: column; gap: var(--Abstand);}
.Mitarbeiterliste
, .ThemaKontakt 				{display: flex; max-width: 324px; justify-content: end;}
.Beobachten
, a.Button.Beobachten 			{color: red; fill: red;}

.Preloader {color: white;}
.Spam {background: red; color: var(--LeichtesGrau); font-weight: bold;}
.Arbeitspaket_1 .Arbeitspaket_1 {filter: grayscale(1); pointer-events: none;}
.ButtonBerechtigung 		{flex-grow: 0;}
/*IDs*/
#Timer {min-width: 15ch;}
#Refresher
, #feedbackexportieren 			{display: none;}
#Benutzer span 					{display: block; padding: var(--Abstand); background: white; border-radius: 50%;}
#Indikator_Benachrichtigungen 	{display: flex;}
/*Nachricht*/
.Adressat.Ungelesen .nachricht_gelesen.Box:not(.Gegenstand .Box) 			{background: var(--FremdInBearbeitung);}
.PostkorbNachricht
{
	padding: var(--Abstand);
	flex: 1;
	max-height: 50vh;
	overflow: auto;
	overflow-wrap: anywhere;
	border: solid 1px lightgray;
	background: white;
	box-shadow: gray 0 0 21px -15px;
	max-width: var(--Lesebreite);
}
.KonversationNachricht
{
	display: grid;
	flex-wrap: nowrap;
	gap: var(--Abstand);
	grid-template-columns: 1fr var(--Lesebreite) 1fr;
}
.Konversation .Anzahl
{
	border-radius: var(--Radius);
	padding: 3px var(--AbstandHalb);
	background: cadetblue;
	color: white;
	display: flex;
	justify-content: center;
	justify-self: right;
	width: min-content;
	align-items: center;
	height: 24px;
	box-sizing: border-box;
	font-size: 12px;
	font-weight: bold;
	margin: 0 5px;
}
.Innenabstand {padding: var(--Abstand);}
.KonversationVersendet
{
	text-align: right;
	justify-self: end;
	width: 110px;
}
.AnzahlUngelesene {background: green; color: white;}
.AnzahlUngelesene.Verantwortlicher {font-weight: bold;}
/*Nachrichten*/
.Nachrichtenverlauf .Tag 	{padding-bottom: 64px;}
main.Nachrichtenverlauf .Liste:not(.Klasse) {gap: 32px;}
/*Planung*/
#Planung {background: white;}
body .Planung .Planzeit
{
	flex-grow: 1;
	position: relative;
	border-radius: 2px;
	background: var(--Termin);
	min-height: 2ch;
	margin-bottom: 1px;
}
body .Planung .Plantag 				{background: white; z-index: 10;}
body .Planung .Urlaub 				{background: var(--Urlaub);}
body .Planung .Plantag.Vergangenheit {flex: 0; opacity: .65;}
body .Planung .Planjahr:not(.Link) 	{flex-basis: 100%;}
body .Planung .Plantag.heute.Box:not(.Gegenstand .Box)
{
	border: solid 3px var(--Gruen);
	z-index: 1;
}
body .Planung .Vergangenheit :is(.Feiertag, .Freistellung, .Urlaub, .Krankmeldung)
{
	background: var(--Dunkler);
}
body .Planung .InhaltTag
{
	display: grid;
	gap: 0 5px;
	grid-template-columns: min-content repeat(auto-fill, auto);
	/* max-width: calc(100vw - 6 * var(--Abstand));
	overflow-x: auto; */
	padding-right: 2px;
}
body .Planung .InhaltTag .Kopf 					{padding-bottom: var(--Abstand);}
body .Planung .InhaltWoche						{flex-wrap: nowrap;}
body .Planung :is(.aktuell > .Kopf, .heute .Kopf, .aktuell > .Monat)	{font-weight: bold;}
body .Planung .Gruppe :is(.Planzeit:not(.eigene, .Kollision), .Sperrung, .Verfuegbarkeit) .MID
, .Plantag .Flags
, body .Planung.Gruppe .Vergangenheit
{
	display: none;
}
body .Planung.Gruppe .Planzeit					{overflow: hidden; white-space: nowrap;}
body .Planung.Klasse:not(.Link) 				{justify-content: center;}
body .Planung .Plantag.Gegenstand 				{justify-content: start;}
body .Planung .Gegenstand 						{align-items: normal;}
body .Planung .Planzeit span 					{padding: 2px;}
body .Planung .AktuellesObjekt 					{outline: 2px solid var(--LinkColor);z-index: 10;}
body .Planung .nichtGruppe:not(.mitPlanungselementen) .Plantag .Kopf.Klasse {display: none;}
body .Planung .InhaltPlanjahr 					{align-items: start; justify-content: center;}
body .Planung .Kollision 						{display: grid; gap: 0 2px; background: none; padding: 0 2px 2px 0;}
body .Planung .Vergangenheit .Kollision 		{background: none;}
body .Planung :is(.Planwoche.Zukunft, .Planwoche.Aktuell) 	{flex-basis: 100%;}
body .Planung .Verfuegbarkeit 					{background: #edf8ed; padding: 5px;}
body .Planung .Sperrung 						{background: #f7e8e8; padding: 5px;}
body .Planung .Vergangenheit :is(.Verfuegbarkeit, .Sperrung) {background: var(--LeichtesGrau);}
body .Planung :is(.Verfuegbarkeit, .Sperrung):hover 		{z-index: initial;}
#Planung :is(.Flag, .Kontakt.MID) 						{display: none;}
#Planung .MID .Objekte 									{flex-direction: row;}
.Terminvereinbarung .Planung .Planzeit {min-height: 0;}
.Terminvereinbarung .Planung .Plantag {--HoehePlantag: calc(16*30px);}
/*Report*/
.Report > tbody > tr:hover>td 				{background-color: #DBE5EE !IMPORTANT;}
.Report > tbody > tr > td:hover 			{outline: 1px solid white;}
.Report .actiontr .Flex > div				{flex: 1;}
div.Report.Diagrammreport
{
	display: flex;
	gap: var(--Abstand);
	flex-direction: column;
}
body .Diagramm 							{transition: .3s;}
body .Diagramm.lade 					{transition: .3s; opacity: 0;}
.DiagrammsetLinkItem 					{display: flex; gap: var(--Abstand);}
body .Report .Diagramm canvas
{
	height: auto !important;
	max-height: 50vh !important;
	max-width: 85vw;
	margin: auto
}
div.Report.Diagrammreport .kopfleiste 	{border-radius: var(--Radius); overflow: hidden;}
#Suchergebnis 							{position: relative; z-index: 99999;}
.Suchfunktion_markiert a 				{background-color: #306AaE55;}
.controlbar 							{align-self: start; position: sticky; left: 0;}
.controlbarZeilenanzahl 				{flex: 0; white-space: nowrap;}
.controlbarSeitenlister 				{flex: 1; white-space: nowrap;}
.controlbarStatistik 					{color: #333;}
.standard 								{border-collapse: collapse; width: 100%}
.standard td:not(.standard .Textmenu td){min-width: 8ch;}
.standard .Kontaktname  				{flex-wrap: nowrap;}
.standard .Kontaktname .Namenspraefix 	{order: 1;}
.standard .Kontaktname .Vorname 		{order: 3;}
.standard .Kontaktname .Name 			{order: 2;}
.standard .Kontaktname:has(.Vorname + .Name) .Name:after {content: ", ";}
.standard .MID .Paket 					{flex-wrap: nowrap;}
.standard .Gruppe>.MID .Paket 			{max-width: 400px;}
.standard .Kollision .MID .Paket 		{max-width: 400px;}


.Modulbox 								{padding-bottom: var(--Abstand);}
/*Medien*/
@media (hover: none) and (pointer: coarse)
{
	.dragpanel {display: none;}
}
@media only screen and (max-width: 1023px)
{
	#nav {display: none;}
	body .Ereignis 				{flex-direction: column; background: var(--Dunkler);}
	body .Ereignis > .Ausloeser {flex-direction: row; border-bottom: 1px solid var(--BorderColor);}
	body .Ereignis > .Inhalt 	{flex-direction: column;}
	body > * 				{max-width: 100%;}
	nav > * 				{flex: 1 1 auto; min-width: 0;}
	.Klasse.Detail 			{gap: var(--Abstand);}
	.Klasse.Detail .Kopf 	{flex-wrap: wrap;}
	.Klassenlink
	, .Uebersicht
	, a.Button.JSON
	, .LetzteNachricht
	, .LinkInteraktion
	, .Vergangenheit
	, .ButtonBerechtigung
	, .controlbar .Buttons
	, .LinkBasisobjekt
	, .Desktop 					{display: none;}
	.Startseite > div 			{flex-direction: column;}
	.Koerper 					{flex-direction: column;}
	.Flex.Zentriert.controlbarSuche {flex-direction: column; align-items: normal; flex-basis: 100%;}
	.Lesebreite 				{max-width: 100vw; flex: 1; overflow-wrap: anywhere;}
	.Box .Lesebreite 			{max-width: calc(100vw - var(--AbstandDoppelt));}
	.KonversationNachricht 		{display: flex; flex-direction: column;}
	.Klasse.Detail .Liste:not(.Klasse) 	{gap: var(--Abstand);}
	#Darstellung 				{overflow: auto;}
	.Adressaten 				{flex-direction: column;}
	.Liste:not(.Klasse) 		{gap: var(--Abstand);}
	header 						{position: relative; z-index: 999999999; background: var(--Dunkler);}
	header .icon				{height: 48px; width: 48px;}
	header .Box 				{padding: 0;}
	header > div 				{flex: 1;}
	.KonversationNachricht
	{
		border: solid 1px var(--BorderColor);
		box-shadow: var(--SchattenLeicht);
		box-sizing: border-box;
		background: white;
		border-radius: var(--Radius);
		padding: var(--Abstand);
	}
	.NachrichtTextExtern {max-width: calc(100vw - var(--AbstandDoppelt)); overflow-x: auto;}
	.Ereignis .NachrichtTextExtern {display: none;}
	input[type=submit]
	, input[type=button]
	, a.Button
	, button
	, a.Methode:not(.Klasse)
	{
		padding: var(--Abstand);
		border-radius: var(--RadiusHalb);
	}
	.MID 		{flex-wrap: wrap;}
	.Flags 		{flex-basis: 100%;}
	.InhaltWoche {gap: var(--AbstandViertel);}
}
@media only screen and (min-width: 1024px)
{
	body
	{
		display: flex;
		flex-direction: column;
		gap: var(--Abstand);
		background: var(--Hintergrund);
		padding: var(--Abstand);
		padding-bottom: 50vh;
	}
	body .Ereignis 		{display: grid; grid-template-columns: 1fr 4fr;}
	main 				{margin: 0 auto;}
	header .Flags 		{display: none;}
	header .Sticky0 	{top: var(--Abstand);}
	header a.Link span 	{display: block;}
	.Applikation 		{grid-column: 1/4;}
	.Labelbox 							{align-items: end;}
	.Abstand .cmx_ajaxcontainer 		{align-self: normal; display: flex;}
	.Attribute 							{grid-column: 1/2; border-radius: 0 0 0 var(--Abstand);}
	.Koerper 							{flex-wrap: nowrap;}
	aside
	{
		grid-column: 2/3;
		border-left: var(--BorderColor) 1px solid;
		white-space: nowrap;
		padding-left: var(--Abstand);
	}
	.Eigenschaften 						{gap: var(--AbstandViertel);}
	.Eigenschaften > .Eigenschaft 		{grid-template-columns: 38.2fr 61.8fr;}
	.Beschriftung 						{display: flex; justify-content: end; align-items: center;}
	.Beschriftung .label 				{text-align: right;}
	.Kette 								{align-items: center;}
	.Gegenstand .Eigenschaften > .Eigenschaft {grid-template-columns: 150px auto;}
	.Eigenschaft > .Wert 				{word-wrap: break-word; max-width: 80ch; width: max-content; min-width: 100%;}
	.gross 								{font-size: 1.4rem;}
	.sehrgross 							{font-size: 1.8rem;}
	.Ressource .Wochentage 				{display: flex; gap: var(--Abstand);}
	.Attribute .Gegenstand.Planzeit:not(.Attribute .Gegenstand .Gegenstand, .Anhang)
	{
		position: relative;
		border-width: 0;
		box-shadow: black 1px 1px 3px -1px;
		z-index: 0;
	}
	#detail:not(.Listenseitencontainer #detail)
	, #detail #Kollaborationsleiste
	, #liste
	{
		padding-top: var(--Abstand);
	}
	#startseite .Gegenstand.in_bearbeitung 	{box-shadow: var(--SchattenLeicht);}
	.Kacheln 								{max-width: 1200px;}
	.Kacheln .Gegenstand 					{flex-grow: 1;}
	.Beziehungen 							{max-width: var(--Lesebreite);}
	.Beziehungen a 							{box-sizing: border-box; min-width: 64px; min-height: 64px;}
	.SenderUndEmpfaenger 					{display: flex; justify-content: right;}
	.NachrichtTextExtern
	{
		overflow: auto;
		max-height: 50vh;
		background: white;
		box-sizing: border-box;
		flex-wrap: nowrap;
		width: 100%;
	}
	.sticks 										{transition: .3s; padding-top: var(--Abstand);}
	.Lesebreite td 									{overflow-wrap: normal;}
	.Nachrichtenverlauf .Liste .Nachricht 			{width: var(--Lesebreite);}
	.Nachrichtenverlauf .Liste .Gegenstand 			{flex-wrap: nowrap;}
	.Nachrichtenverlauf .Liste .Gegenstand.links 	{align-self: start;}
	.Nachrichtenverlauf .Liste .Gegenstand.rechts 	{align-self: end;}
	#Planung .Plantag.Gegenstand 					{padding: var(--Abstand);}
	.Dialog
	{
		display: flex;
		gap: var(--Abstand);
		flex-direction: column;
		box-shadow: var(--Schatten);
		background: white;
		padding: var(--Abstand);
	}
	.Burger 						{display: none;}
	.standard thead.sticks			{background: var(--HintergrundDetail);}
	nav 							{gap: var(--AbstandViertel);}
	/*ehemals: min-width: 1440px*/
	body
	{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
	}
	header nav.Flex 			{flex-direction: column;}
	header .VorgangErstellen 	{display: flex; align-items: center; flex: 1;}
	header.Flex
	{
		grid-column: 1/2;
		grid-row: 1/2;
		flex-direction: column;
		align-self: normal;
	}
	header .Kopf 	{flex-basis: 100%; flex-wrap: nowrap; align-items: center;}
	main
	{
		grid-column: 2/3;
		grid-row: 1/2;
		align-items: center;
	}
	#Planung
	{
		grid-column: 1/3;
		grid-row: 2/3;
	}
	#applikation, #report
	{
		grid-column: 1/-1;
		margin: 0 auto;
	}
	.Standardapplikation
	{
		border-left: var(--BorderColor) 1px solid;
		padding-left: var(--Abstand);
	}
	#Planung
	{
		grid-row: 2/3;
		margin-left: calc(var(--Abstand) * -1);
		margin-right: calc(var(--Abstand) * -1);
	}
}
@media only screen and (min-width: 1024px) and (max-width: 1599px)
{
	body .Eigenschaften.Liste:not(.Klasse) 	{gap: var(--Abstand);}
	.Box .Eigenschaften > .Eigenschaft 		{display: flex; flex-direction: column; gap: 1px;}
	.Eigenschaft > .Wert 					{width: auto;}
	.Beschriftung 							{justify-content: start;}
}
@media print
{
	html 			{height: auto;}
	body,html 		{background: none;}
	.Klasse.Detail 	{display: flex;}
	tfoot 			{display: table-row-group;}
	#header
	, #headerbar
	, .nav
	, .subnavi
	, .subnavi_2
	, .Kollaboration
	, .actiontr
	, .loeschen
	, #CMXOptionen
	, input[type=checkbox]
	, .controlbar
	, .EigenschaftenLinkContainer
	, aside
	, .Verlauf
	, .Kollaboration
	{
		display: none !IMPORTANT;
	}
	#content 			{padding: 0px; box-shadow: none;}
	.standard 			{border-collapse: collapse; border: 1px solid #aaa; margin-top: var(--Abstand);}
	.standard td,
	.standard .multicol > div {border-width: 0px; background-color: white; border: 1px solid #aaa;}
	.standard th 		{border-width: 0px; background-color: white; border: 1px solid #aaa;}
	a:link,
	a:visited 			{text-decoration: none; color: #000;}
	.standard table td 	{border-width: 0px;}
	h1 					{margin-bottom: var(--Abstand);}
	body				{padding-bottom: 0;}
	div.Report 			{max-width: min-content;}
}






/*Muss weggearbeitet werden*/
.Darkerpanel
{
	display: flex;
	gap: var(--Abstand);
	padding: var(--Abstand);
	background: var(--Dunkler);
	border-radius: var(--Radius);
}
.whitepanel 			{padding: var(--Abstand); background-color: #ffffff;}
/*Wegen Ajaxtechnik*/
#delbereich 			{display: flex; flex-direction: column; gap: var(--Abstand);}