/*Elemente*/
body
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	margin: 0px auto;
	padding-bottom: 50vh;
	font-family: arial, tahoma, helvetica;
	background: var(--HintergrundDetail);
}
header nav.Flex
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding: var(--AbstandHalb) var(--Abstand);
}
header #ergebnisSuche .Link 	{padding: var(--AbstandHalb);}
main				{display: flex;flex-direction: column; gap: var(--Abstand);}
.Klasse.Detail 		{display: flex; flex-direction: column; gap: var(--Abstand);}
aside 				{display: flex; flex-direction: column;}
aside .Gegenstand 	{white-space: pre;}
aside .Liste 		{gap: 0;}
aside img.icon 		{width: 32px; height: 32px;}
aside .Flags 		{display: none;}
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; width: max-content; vertical-align: top;}
video, audio 		{width: 100%; max-width: 100%; max-height: 70vh;}
*:focus-visible 	{outline: var(--Outline); z-index: 99; outline-offset: -2px;}
.platzhalter 		{padding: 0px 3px 0px 3px; background-color: #D1E0EE; color: #888; border-radius: 3px;}
nav 				{display: flex; gap: var(--AbstandHalb); 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;}
.standard thead 	{z-index: 99999; position: sticky; top: 0; background: var(--HintergrundDetail);}
h1
{
	display: flex;
	align-items: center;
	font-size: 2rem;
	font-weight: normal;
	position: relative;
}
/*allgemeine Klassen*/
.Abstand 				{gap: var(--Abstand);}
.AbstandKlein 			{gap: var(--AbstandViertel);}
.Liste:not(.Klasse) 	{display: flex; flex-direction: column; gap: var(--AbstandViertel);}
body > .Liste 			{border-radius: var(--Radius); overflow: hidden; gap: 1px;}
.Kette 					{display: flex; flex-wrap: wrap; gap: var(--Abstand); max-width: max-content;}
.Link
, nav > a
, nav > div
{
	display: flex;
	align-items: center;
	position: relative;
	gap: var(--AbstandHalb);
}
svg.Link 				{width: 32px; height: 32px;}
.Link.wichtig
, .Gegenstand.wichtig 	{font-weight: bold;}
.Wert .Link 			{flex: 1;}
.Gegenstand > a.Link	{flex-grow: 1; flex-wrap: nowrap;}
.icon 					{height: 32px; width: 32px;}
.MID
{
	display: flex;
	gap: var(--AbstandHalb);
	align-items: center;
	flex-wrap: wrap;
}
.MID .Objekte
{
	display: flex;
	gap: var(--AbstandViertel);
	flex-direction: column;
	max-width: 80ch
}
.TextMID
{
	display: -webkit-box;
	-webkit-line-clamp: 9;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
:is(#Kopf, .Kopf) .TextMID {-webkit-line-clamp: 1;}
.MID .MID .Flag
, .MID .MID .Flags 								{display: none;}
.Mitarbeiter .MID .MID :is(.Flags, .Flag) 		{display: flex;}
.AnhangSignatur .MID .MID :is(.Flags, .Flag) 	{display: flex;}
.Buttons 										{gap: var(--AbstandViertel);}
.Inaktiv
, .Storniert
, .Kompaktdarstellung.offline 					{filter: grayscale(1);}
.Gegenstand /* Gegenstand ist ein Objekt, wenn es nicht als Detail angezeigt wird */
{
	display: flex;
	gap: var(--Abstand);
	justify-content: space-between;
	align-items: center;
	white-space: normal;
}
.Gegenstand .Gegenstand 			{flex-grow: 1;}
/* Status Flag Farben */
.Flag.in_bearbeitung
,.Flag.online
,.Flag.gültig						{background: var(--LeichtesGruen)}
.Flag.fremd_in_bearbeitung
,.Flag.in_durchführung				{background: var(--FremdInBearbeitung)}
.Flag.zu_besprechen 				{background: var(--Thema);}
.Flag.zurueckgestellt
/* ,.Flag.abgeschlossen 				{background: lightgrey} */
.Flag.abgebrochen
,.Flag.abgesagt
,.Flag.ungültig
,.Flag.fehlerhaft
,.Flag.ungültig_manuell				{background: var(--LeichtesRot);}
.Flag.geplant
,.Flag.erstellt
,.Flag.terminiert   				{background: var(--Termin);}
.Flag.gültig_nicht_verifiziert		{background: orange;}
.Flag.verschluesselt				{background: var(--LeichtesGruen); display: flex; align-items: center; gap: var(--AbstandViertel);}
.Flag.Vorlage						{border: 1px solid var(--Rot);}
.Flag.Muster						{border: 1px solid var(--Blau);}
.Kopf.erledigt 						{filter: grayscale(1);}
.Gegenstand.erledigt 				{filter: grayscale(1);}
.Gegenstand img 					{border-radius: var(--RadiusViertel);}
.Baum
{
	display: flex;
	flex-direction: column;
	gap: var(--AbstandViertel);
	padding-left: calc(var(--Abstand) * 6);
}
.Listenseite 			{margin: 0 auto;}
.Klasse.Detail #Kopf {grid-column: 1/-1;}
.Klasse.Detail .Kopf
{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--Abstand);
}
.Listenseitencontainer 						{max-width: 100%; align-self: normal; margin: 0 auto;}
.cmx_ajaxcontainer:empty
, .Flag:empty 								{display: none;}
#Applikationen .AktuelleURL 				{font-weight: bold;}
.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;}
.Button .Indikatoren
{
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-radius: 2px;
	gap: 1px;
	max-width: calc(109px);}
.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);}
.Flag
{
	border-radius: var(--RadiusViertel);
	padding: var(--AbstandViertel) var(--AbstandHalb);
	background: var(--Dunkler);
	font-size: 1rem;
	white-space: nowrap;
}
a.Flag 							{color: white !important;}
.dragpanel
{
	border-radius: var(--RadiusViertel);
	min-width: var(--Abstand);
	min-height: var(--Abstand);
	background: #ccc;
	cursor: move;
	align-self: normal;
}
.Mitarbeiterliste img 			{object-fit: cover;}
table.Auswahl th:first-child 	{width: 1%;}
.lightredBackground 			{background-color: #fdd;}
.lightgreenBackground 			{background-color: var(--LeichtesGruen);}
.lightorangeBackground 			{background-color: #FEA;}
.breit 							{flex: 1;}
/*Klassen*/
.Attribute 						{display: flex; flex-direction: column; gap: var(--Abstand);}
.Trennlinie 					{border-top: solid 1px var(--BorderColor); padding-top: var(--Abstand);}
.NachrichtInhalt
, .Fließtext
, .KonversationNachrichtInhalt 	{overflow-wrap: anywhere;}
:is(#Objekte, #Reports, #Applikationen, header) .Steuerelemente 			{display: none; flex-wrap: nowrap;}
:is(#Objekte, #Reports, #Applikationen) .Steuerelemente a.Button 			{padding: var(--AbstandViertel);}
:is(#Objekte, #Reports, #Applikationen).in_bearbeitung .Steuerelemente 		{display: flex;}
.TextWeitergeleitet
{
	max-height: 8rem;
	max-width: 80ch;
	overflow: auto;
	border-left: var(--AbstandHalb) solid var(--BorderColor);
	padding-left: var(--Abstand);
}
.Kollaboration .Fließtext
{
	max-width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.Applikationsreferenzen 		{display: flex; flex-direction: column; gap: var(--Abstand);}
.Mitarbeiterliste
, .ThemaKontakt 				{display: flex; max-width: 324px;}
.Link.offline .Kontaktbild 		{filter: grayscale(1); opacity: .65;}
.Link.abwesend .Kontaktbild 	{opacity: .65;}
a.Button.beobachten 			{color: red; fill: red;}
.Initialen
{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--Dunkler);
	padding: var(--AbstandHalb);
	align-self: normal;
	border-radius: var(--AbstandViertel);
	box-sizing: border-box;
	min-width: 64px;
	text-align: center;
	background: #6b87ab;
	color: white;
}
.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*/
.gelesen 	{order: 1; border: solid 2px green; border-radius: 6px; overflow: hidden;}
.ungelesen 	{order: 2;}
.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: 80ch
}
.KonversationNachricht
{
	display: grid;
	flex-wrap: nowrap;
	gap: var(--Abstand);
	grid-template-columns: 1fr 80ch 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 					{grid-row: 2/3;}
.Planung .Planzeit
{
	flex-grow: 1;
	position: relative;
	border-radius: 2px;
	background: var(--Termin);
	min-height: 2ch;
	margin-bottom: 1px;
}
.Planung .Planzeit
{
	max-width: 40ch;
}
.Planung .Urlaub {background: var(--Urlaub);}
.Planung .Plantag.Vergangenheit {align-self: start; flex: 0;}
.Planung .Vergangenheit :is(.Feiertag, .Freistellung, .Urlaub, .Krankmeldung) {background: var(--Dunkler);}
.Planung .Planjahr:not(.Link) {flex-basis: 100%;}
.Planung .InhaltTag
{
	display: grid;
	gap: 0 5px;
	grid-template-columns: min-content repeat(auto-fill, auto);
	max-width: calc(100vw - 2 * var(--Abstand));
}
.Planung .InhaltTag .Kopf 					{padding-bottom: var(--Abstand);}
.InhaltWoche 								{justify-content: center;}
.Planung :is(.aktuell > .Kopf, .heute .Kopf, .aktuell > .Monat)	{font-weight: bold;}
.Planung .Gruppe :is(.Planzeit:not(.eigene, .Kollision), .Sperrung, .Verfuegbarkeit) .MID
, .Plantag .Flags							{display: none;}
.Planung.Klasse:not(.Link) 					{justify-content: center;}
.Planung .Plantag.Gegenstand 				{justify-content: start; overflow: auto; min-width: min-content;}
.Planung .Gegenstand 						{align-items: normal;}
.Planung .Planzeit span 					{padding: 2px;}
.Planung .AktuellesObjekt 					{outline: var(--Outline); outline-offset: -2px;}
.Planung .nichtGruppe:not(.mitPlanungselementen) .Plantag .Kopf.Klasse {display: none;}
.Planung .InhaltPlanjahr 					{align-items: start; justify-content: center;}
.Planung .Kollision 						{display: grid; gap: 0 2px; background: #fdf2f2;}
.Planung .Vergangenheit .Kollision 			{background: none;}
.Planung :is(.Planwoche, .Planjahr) 		{align-items: center;}
.Planung :is(.Planwoche.Zukunft, .Planwoche.Aktuell) 	{flex-basis: 100%;}
.Planung .Verfuegbarkeit 					{background: #edf8ed; padding: 5px;}
.Planung .Sperrung 							{background: #f7e8e8; padding: 5px;}
.Planung .Vergangenheit :is(.Verfuegbarkeit, .Sperrung) {background: var(--LeichtesGrau);}
.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: 50vh;}
.Termin .Terminvereinbarung .Planung .Planzeit span
, .Termin .Terminvereinbarung .Planung .Kopf {display: none;}
/*Report*/
.report .Link 								{align-items: start;}
.report > tbody > tr:hover>td 				{background-color: #DBE5EE !IMPORTANT;}
.report > tbody > tr > td:hover 			{outline: 1px solid white;}
.report .actiontr .Flex 					{gap: 0;}
.report .actiontr .Flex > div				{flex: 1;}
.report .actiontr .Flex > div:first-child 	{align-self: center; flex: 0;}
div.report.Diagrammreport
{
	display: flex;
	gap: var(--Abstand);
	flex-direction: column;
}
.Diagramm 						{transition: .3s;}
.Diagramm.lade 					{transition: .3s; opacity: 0;}
.DiagrammsetLinkItem 			{display: flex; gap: var(--Abstand);}
.report .Diagramm 				{padding: var(--Abstand);}
.report .Diagramm canvas
{
	height: auto !important;
	min-width: 500px;
	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;}
.ReportStatusleiste 					{padding: var(--Abstand); background: var(--Dunkler); border-radius: var(--RadiusHalb);}
.standard 								{width: min-content; border-collapse: collapse;}
.standard .MID 							{width: max-content;}
.standard td 							{min-width: 8ch;}
.report 								{margin: auto;}
/*Medien*/
@media (hover: none) and (pointer: coarse)
{
	.dragpanel {display: none;}
}
/*
@media only screen and (max-width: 700px)
{
	header.Flex
	{
		height: 100dvh;
		align-items: center;
	}
}
*/
@media only screen and (max-width: 1023px)
{
	body > * 					{max-width: 100%;}
	.Klasse.Detail 				{gap: var(--Abstand);}
	.Klasse.Detail .Kopf 		{flex-wrap: wrap;}
	#Kopf picture
	, .Klassenlink
	, .Uebersicht
	, a.Button.JSON
	, .LetzteNachricht
	, .LinkInteraktion
	, .Vergangenheit
	, .ButtonBerechtigung
	, .controlbar .Buttons
	, .LinkBasisobjekt 			{display: none;}
	.controlbar 				{justify-content: center;}
	.KonversationNachricht 		{display: flex; flex-direction: column;}
	.Gegenstand 				{flex-wrap: wrap;}
	.Klasse.Detail .Liste:not(.Klasse) 	{gap: var(--Abstand);}
	#Darstellung 				{overflow: auto;}
	.Adressaten 				{flex-direction: column;}
	.Liste:not(.Klasse) 		{gap: var(--Abstand);}
	header 						{background: var(--Dunkler);}
	header .icon				{height: 48px; width: 48px;}
	header .Box 				{padding: 0;}
	header > div 				{flex: 1;}
	header .Link :is(span, .MID){display: none;}
	.KonversationNachricht
	{
		border: solid 1px var(--BorderColor);
		box-shadow: var(--SchattenLeicht);
		box-sizing: border-box;
		background: white;
		border-radius: var(--Radius);
		padding: var(--Abstand);
	}
}
@media only screen and (min-width: 1024px)
{
	body
	{
		background: var(--Hintergrund);
		min-height: 80dvh;
		padding: var(--Abstand) var(--Abstand) 90vh var(--Abstand);
		/* align-items: center; */
	}
	main 				{margin: 0 auto;}
	header .Flags 		{display: none;}
	header .Sticky0 	{top: var(--Abstand);}
	header a.Link span 	{display: block;}
	.Applikation 		{grid-column: 1/3;}
	.Kollaboration 		{align-items: center;}
	.Labelbox 							{align-items: end;}
	.Abstand .cmx_ajaxcontainer 		{align-self: normal; display: flex;}
	.Attribute 							{grid-column: 1/2; border-radius: 0 0 0 var(--Abstand);}
	aside 								{grid-column: 2/3; border-left: var(--BorderColor) 1px solid; white-space: nowrap; padding-left: var(--Abstand);}
	.Klasse.Detail 						{display: grid; grid-template-columns: auto min-content;}
	.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;}
	.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 {padding-top: var(--Abstand);}
	#startseite .Gegenstand.in_bearbeitung 	{box-shadow: var(--SchattenLeicht);}
	.Kacheln 								{max-width: 1200px;}
	.Kacheln .Gegenstand 					{flex-grow: 1;}
	.Beziehungen 							{max-width: 80ch;}
	.Beziehungen a 							{box-sizing: border-box; min-width: 64px; min-height: 64px;}
	.SenderUndEmpfaenger 					{display: flex; justify-content: right;}
	.InhaltVonEMail
	{
		border: solid lightgray 1px;
		box-shadow: var(--Shadow);
		padding: var(--Abstand);
		overflow: auto;
		max-height: 50vh;
		max-width: 80ch;
		background: white;
		box-sizing: border-box;
		flex-wrap: nowrap;
	}
	.Fließtext 										{max-width: 80ch; flex: 1;}
	.Nachrichtenverlauf .Liste .Nachricht 			{width: 80ch;}
	.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(--Shadow);
		background: white;
		padding: var(--Abstand);
	}
	#applikation, #report
	{
		padding-top: var(--Abstand);
	}
}
@media only screen and (max-width: 1600px)
{
	header.Flex 	{justify-content: center;}
	.Desktop 		{display: none;}
	.gridContainer
	{
		margin-left: calc(var(--Abstand) * -1);
		width: 100vw;
		overflow-x: auto;
	}
}
@media only screen and (min-width: 1600px)
{
	body
	{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
	}
	header 						{width: min-content;}
	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;
		margin: auto;
		margin-top: calc(var(--Abstand) * -1);
		padding-top: var(--Abstand);
	}
	#applikation, #report
	{
		grid-column: 1/-1;
		margin: 0 auto;
	}
	.standardapplikation
	{
		grid-column: 3/4;
		border-left: var(--BorderColor) 1px solid;
		padding-left: var(--Abstand);
	}
	#Verlauf {margin: auto;}
}
@media print
{
	html {height: auto;}
	body,html {background: none;}
	tfoot { display: table-row-group; }
	#header,
	#headerbar,
	.nav,
	.subnavi,
	.subnavi_2,
	.actiontr,
	.loeschen,
	#CMXOptionen
	, input[type=checkbox]
	,.controlbar
	,img
	{
		display: none;
	}
	#content 			{padding: 0px; box-shadow: none;}
	.Klasse				{min-height: 100vh;}
	.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);
}
a.Button:link 			{border-radius: var(--RadiusViertel);}
.whitepanel 			{padding: var(--Abstand); background-color: #ffffff;}
/*Wegen Ajaxtechnik*/
#delbereich 			{display: flex; flex-direction: column; gap: var(--Abstand);}