:root {--hintergrund: #444b53;}
body {background: var(--hintergrund); margin: 0; overflow-y: scroll;}
.HauptbereichTeam {background: #f0f3f6;}
#startseite {z-index: 9999999999; position: relative;}
#startseite #hintergrund {position: fixed; right: var(--abstand); bottom: var(--abstand);}
#startseite #hintergrund:hover {height: 200px; width: 200px;}
#startseite #hintergrund img
, #startseite #hintergrund .platzhalterHintergrundbild
{
	transition: .5s ease;
	object-fit: cover;
	width: 64px; height: 64px;
	cursor: pointer;
	background: var(--brighter);
	border-radius: 5px;
	opacity: 0.7;
	box-shadow: var(--shadow);
}
#startseite .platzhalterHintergrundbild
{
	position: fixed;
	right: var(--abstand);
	bottom: var(--abstand);
}
#startseite #hintergrund:hover img {opacity: 1;}
.hintergrundBestand {transition: .3s; background: black}
.hintergrundBestand:hover {transition: .3s; background: var(--hintergrund); border-radius: 0; filter: brightness(0);}
#content>div>div:first-child .VorgangKopf {padding-top: var(--abstand);}
#startseite .Controls {display: none;}
.maingrid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--abstand);
	margin: 0 auto;
	padding: 0 var(--abstand);
}
.Box.aktuell .Vorgang {flex: 1;}
.Box.aktuell .VorgangText {display: grid; gap: 0 var(--abstand); grid-template-columns: 2fr var(--abstand) 1fr;}
.Box.aktuell .VorgangText .Hauptbereich {order: 1; max-width: 500px;}
.Box.aktuell .VorgangText .VorgangLink {order: 2;}
.Box.aktuell .VorgangText .dragpanel {order: 3;}
.Box.aktuell .VorgangText .VorgangKontakt {order: 4;}
.Konversationsliste {display: flex; flex-direction: column; gap: 15px;}
.KonversationItem .Anzahl
{
	border-radius: 15px;
	padding: 3px 10px;
	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;
}
.maingrid .Box {box-shadow: var(--shadow);}
.maingrid #warten {grid-column: 1/2; grid-row: 1/2;}
.maingrid #Vorgaenge {grid-column: 2/3; grid-row: 1/2;}
.maingrid #Applikationen {grid-column: 3/4; grid-row: 1/2;}
.maingrid .Box {
	border-radius: var(--abstand);
	padding: var(--abstand);
	background: #fff;
	backdrop-filter: blur(4px);
}
.maingrid .Box.inaktiv {transition: .5s; opacity: 0.6;}
.maingrid .Box.inaktiv:hover {transition: .5s; opacity: 1;}
.maingrid .Kopf {padding-bottom: var(--abstand); display: flex;}
.maingrid .Kopf>div:first-child {flex: 1;}
.maingrid a.iconlink {transition: 1s; display: block; color:darkgray; font-size: 2rem; margin-top: -5px;}
.maingrid a.iconlink:hover {transition: .5s; text-decoration: none; transform: rotate(50deg);}
.Benachrichtigung .Kollaboration {border-top: none; border-bottom: none;}

.NichtAktuellerBenutzer {
	text-align: center;
	padding: var(--abstand);
	background: white;
}
.BenutzerName {
	font-size: 3rem;
}
.unsere {display: flex; gap: var(--abstand); justify-content: center;}
.NichtAktuellerBenutzer.sticks {background: white; border-bottom: 1px solid var(--link_color);}
.Vorgang > .KollaborationsitemKlein {display: none;}
.HauptbereichTeam
{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: var(--abstand);
}
.HauptbereichTeam .ArbeitsgruppeItem .standard {font-weight: bold;}
.HauptbereichTeam .Teamliste {
	display: grid;
	justify-content: center;
}
.Arbeitsgruppen {display: flex; gap: 1px;}

.KonversationItem .Vorgang_name {
	white-space: nowrap;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.Konversationen {
	background: linear-gradient(90deg,#fff0,#fffb,#fffb,#fff0);
}
.KonversationenListe {
	display: flex;
	gap: var(--abstand);
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
	max-width: 800px;
	margin: auto;
	padding: var(--abstand);
}
.InteraktionItem {
	transition: .3s;
	gap: var(--abstand);
	background: white;
	border-radius: 5px;
	box-shadow: black 0 0 3px -1px;
	overflow: hidden;
}
.InteraktionItem .KontaktItemKlein {padding: 0;}
.InteraktionItem .square {background: none !important; min-width: 30px;}
.InteraktionItem .square img {border-radius: 0; width: 100%;}
.InteraktionItem:hover {transition: .3s; background: #fffb;}
.Box.aktuell {display: flex; flex-direction: column; gap: 1px;}
.maingrid .Box {box-shadow: black 0 0 3px -1px;}
#startseite #content
{
	width: 100vw;
	padding: 0;
	padding-bottom: 30vh;
	min-height: 50vh;
}
.MitarbeiterUndKunden {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 5px 0;
}

#Refresher {display: none;}
.hatZugesagt {display: none;}
#startseite {
	background-image: url(https://www.cmxkonzepte.de/backgrounds/tag_6.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-attachment: fixed;
	background-size: cover;
	min-height: 100vh;
}
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 144dpi), (max-width: 1920px) {
	#startseite {
		background-image: url(https://www.cmxkonzepte.de/backgrounds/tag_6_1080.jpg);
	}
}
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 144dpi), (max-width: 1920px) {
	#startseite {
		background-image: url(https://www.cmxkonzepte.de/backgrounds/tag_6_1080.jpg);
	}
}
#startseite .Termin {transition: .3s; display: flex; gap: var(--abstand);}
#startseite .Termin:hover {text-decoration: none;}
#startseite .Termin .Zeit {
	display: flex; gap: var(--abstand);
	font-size: 2rem; font-weight: bold;
	margin-right: 0;
	background: var(--darker);
	padding: var(--abstand);
	width: 10rem;
	align-items: center;
	justify-content: center;
}
#startseite .naechsterTermin .Datum {white-space: nowrap;}
#startseite .naechsterTermin .Uhrzeit {white-space: nowrap; margin: auto;}
#startseite .aktuelleTermine {display: flex; flex-direction: column; padding: 0;}
#startseite .aktuelleTermine .Terminteaser {flex-direction: column;}
#startseite .VorgangStartseite {display: flex; gap: var(--abstand); flex-wrap: nowrap; padding: 0;}
#startseite .VorgangStartseite .flexCentered
{
	padding: var(--abstand) var(--abstand) var(--abstand) 0;
	flex-direction: row;
}
#startseite .VorgangStartseite .red {text-align: right;}
#startseite .VorgangStartseite.in_bearbeitung {border-radius: 5px; overflow: hidden;}
#startseite #vorgaengeSuche .VorgangStartseite:last-child {padding-bottom: var(--abstand); border-bottom: 1px solid gray; margin-bottom: var(--abstand)}

#startseite #bildHintergrund {position: absolute; bottom: 0; right: 0; z-index: 10;}
#startseite #bild_1 {position: fixed; right: -79px; bottom: var(--abstand); z-index: 2;}
#startseite #bild_2 {position: fixed; right: -79px; bottom: -79px; z-index: 3;}
#startseite #bild_3 {position: fixed; right: var(--abstand); bottom: -79px; z-index: 4;}
#startseite #hintergrund:hover #bild_1 {right: calc(94px); bottom: var(--abstand);}
#startseite #hintergrund:hover #bild_2 {right: calc(94px); bottom: calc(94px);}
#startseite #hintergrund:hover #bild_3 {right: var(--abstand); bottom: calc(94px);}
#startseite .Box.verpasst {
	display: flex;
	gap: var(--abstand);
	flex-direction: row;
	overflow: hidden;
}
.AlleBenachrichtigungenLink {text-align: right; padding: 0 var(--abstand);}
.AlleBenachrichtigungenGrid {display: flex; align-items: end; gap: var(--abstand);}
.AlleBenachrichtigungenGrid > div:first-child {flex: 1;}
.AlleBenachrichtigungenGrid .Benachrichtigungstext {text-align: left;}
#Vorgaenge .verpasst .Kopf {display: flex; align-items: center; justify-content: center;
	font-size: 2rem;
	margin: calc(-1 * var(--abstand));
	margin-right: 0;
	padding: var(--abstand);
	background: var(--darker);
	border-right: 1px solid red;
	width: calc(10rem - 1px);
}
#Vorgaenge .verpasst .Kopf strong { margin-bottom: 0; }
#Vorgaenge .verpasst .Liste {flex: 1;}

.BenachrichtigungHauptbereich {
	display: flex;
	flex-direction: column;
	gap: var(--abstand);
	flex: 1;
}

#Vorgaenge .Vorgangsbuttons {min-width: 24px; padding-right: 10px;}
#Vorgaenge .VorgangStartseite:hover {transition: .5s; transition-delay: .1s; background: var(--hintergrundApplikation);}
#Vorgaenge .VorgaengeContainer > div:first-child
{
	background: white;
	border-radius: var(--abstand);
	overflow: hidden;
}


#startseite a.spaeter {transition: .5s; font-size: 2.5rem;}
#startseite a.spaeter:hover {transition: 1s; text-decoration: none; color: red;}
#startseite .Vorgangscontainer {background: none;}
.Veranstaltungskalender {display: flex; flex-direction: column; gap: var(--abstand);}
.Veranstaltungskalender .Tag {display: flex;}
.Veranstaltungskalender .Tag>div:first-child {flex-basis: 180px; flex-grow: 0; flex-shrink: 0;}
.Veranstaltungskalender .Tag ol {flex: 1; display: flex; flex-direction: column; gap: 1px;}
.Veranstaltungskalender .Tag li {padding: var(--abstand); margin: 0; background: var(--halfwhite);}
.Veranstaltungskalender .Tag .Titel {flex-basis: 100%;}

#Applikation {grid-column: 2/3;}
#Applikationen .Applikation>.Kopf {padding-bottom: 0;}
#Applikationen .flexlist>div {background: none;}

#Applikation {margin-top: var(--abstand) !important;}

#startseite .Liste {display: flex; flex-direction: column; gap: 1px;}


#startseite #content>div {display: flex; flex-direction: column; gap: var(--abstand);}
#startseite #Verteilernavigation
{
	justify-content: center;
	background: #fffb;
	backdrop-filter: blur(3px);
	gap: 1px;
	max-width: 100vw;
}
#startseite #Verteilernavigation .HotKeyZahlen {top: 0; right: 0px; bottom: auto;}
#startseite #Verteilernavigation a.aktuell 	{outline: 3px solid #204A9E; display: flex; align-items: center; justify-content: center; z-index: 1;}
.VorgangKopf {
	margin-bottom: 0;
	/*box-shadow: inset black 0 -5px 5px -5px;*/
}
.PostkorbStartseite {
	flex: 1;
	display: flex;
	flex-direction: row; flex-wrap: nowrap;
	max-width: 100vw;
	padding: var(--abstand) 0;
	overflow: hidden;
}
.PostkorbStartseite .links {position: relative; grid-column-start: 1; cursor: pointer;}
.PostkorbStartseite .Nachricht {border-radius: var(--abstand);}
.PostkorbStartseite .maingrid {}
.PostkorbStartseite .rechts {position: relative; cursor: pointer;}
.PostkorbStartseite .Pfeil svg {
	color: black;
	filter: drop-shadow(0px 0px 30px white);
}
.PostkorbStartseite .Pfeil
{
	transition: opacity 1.5s;
	opacity: .3;
}
.PostkorbStartseite .Absender {flex: 0;}
.PostkorbStartseite .Absender 			{display: flex; flex-direction: column; gap: var(--abstand);}
.PostkorbStartseite .Nutzung 				{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--abstand);
	white-space: nowrap;
	background: var(--lightred);
	padding: var(--abstand); border-radius: var(--abstand);
	flex-wrap: wrap;
}
.NutzungButtons {
	flex: 1; display: flex; gap: 1px; flex-wrap: wrap;
	justify-content: end;
	text-align: right;
}
.NutzungButtons>div {flex: 1; flex-basis: 100%;}
.PostkorbStartseite .Post 					{border-radius: 5px; overflow: hidden;}
.PostkorbStartseite .VorgangMid 			{padding: 0;}
.PostkorbStartseite .flexVorgang 			{align-items: start;}
.PostkorbStartseite .Buttonbereich 			{align-items: start;}
.PostkorbStartseite .PostkorbButtons 		{flex: 1; flex-basis: 38.2%;}
.PostkorbStartseite .PostNachrichten 		{flex: 1; flex-basis: 61.8%; background: white;}
.PostkorbStartseite .NachrichtContainer 	{border-bottom: solid 1px #C2CDE1; margin-bottom: 10px; padding-bottom: 10px; min-width: 650px;}
.PostkorbStartseite .NachrichtContainer:last-child 	{border-width: 0; margin-bottom: 0; padding-bottom: 0; }
.PostkorbStartseite .PostkorbHauptbereich 	{background: var(--halfblue); display: flex; gap: var(--abstand); padding: var(--abstand); align-items: center;}
.PostkorbStartseite .PostkorbHauptbereich .VorgangMid {align-items: center;}
.PostkorbStartseite .PostkorbHauptbereich .reportlink {margin-right: 0;}
.PostkorbStartseite .NachrichtInhalt 		{padding: 0;}
.PostkorbStartseite .PostkorbNachricht 		{flex: 1; max-height: 50vh; max-width: 45vw; overflow: auto; overflow-wrap: anywhere;}
.PostkorbStartseite .NachrichtControls 		{width: 100px;}
.PostkorbStartseite .NachrichtNichtIntern 	{display: flex; gap: var(--abstand); min-width: 500px; max-width: 100vw; flex-wrap: nowrap;}
.PostkorbStartseite .Buttonliste 			{flex-direction: column; width: min-content;}
.PostkorbStartseite .button 				{display: block !important; flex: 1; font-size: 1.5rem; padding: var(--abstand); text-align: center;}
.PostkorbStartseite .Wertspalte .Vorgang_name
{
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 10em;
	white-space: nowrap;
}
.AbschlussBenachrichtigungen {padding-right: var(--abstand);}
.PostkorbStartseite .modaleAuswahl .Vorgang_name {text-overflow: initial; overflow: visible; max-width: auto; white-space: normal;}

.InhaltKollaboration > div {width: auto;}
.wichtig .Buttons a {font-weight: normal;}
.NachrichtPosteingang {
	display: grid;
	grid-template-columns: 12% auto 12%;
	gap: var(--abstand);
	position: relative;
	flex-basis: 100vw;
	flex-shrink: 0;
}
#Benachrichtigungen {background: linear-gradient(90deg,#fff0,#fffb,#fffb,#fff0); margin-top: 1px;}
#Benachrichtigungen .BenachrichtigungenGrid {
	display: flex;
	flex-direction: column;
	gap: var(--abstand);
	padding: var(--abstand);
	margin: auto;
	position: relative;
	max-width: 90vw;
}
#Benachrichtigungen .BenachrichtigungenGrid .links {width: 250px;}
#Benachrichtigungen .BenachrichtigungenGrid .mitte {width: max-content;}
#Benachrichtigungen .BenachrichtigungenGrid .rechts {width: 250px;}
.Absender .Wertspalte .reportlink span:first-child {display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis;}

#Planung {box-shadow: var(--shadow); margin-left: 0; margin-right: 0;}
#Anmeldungen .guthabenhinweis {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: var(--abstand);
}
#Anmeldungen .guthabenhinweis svg {color: #333;}
.BenutzerUndTag {flex-direction: row;}
.BenutzerUndTag > div {flex: 1;}
@media only screen and (max-width: 1900px)
{
	.Benachrichtigung {flex-wrap: wrap;}
	#startseite .naechsterTermin
		, #startseite .naechsterTermin .Zeit {font-size: 1rem;}
	.KonversationenListe {gap: 5px;}
	.InteraktionItem {border-radius: 2px;}
	#startseite #Verteilernavigation .HotKeyZahlen {top: -2px; font-size: 10px;}
}
@media only screen and (max-width: 1600px)
{
	.PostkorbStartseite .NachrichtNichtIntern {flex-direction: column;}
	#Benachrichtigungen .BenachrichtigungenGrid .links {width: 100px;}
	#Benachrichtigungen .BenachrichtigungenGrid .rechts {width: 100px;}
	#startseite #Verteilernavigation .HotKeyZahlen {top: -5px;}
	#Vorgaenge .verpasst .Kopf {font-size: 1rem;}
	.maingrid {grid-template-columns: 61.8fr 38.2fr;}
	.maingrid > #Vorgaenge {grid-column: 1/2;}
	.maingrid > #Applikationen {grid-column: 2/3;}
	.maingrid > #warten {grid-row: 2/3; grid-column: 1/3;}
	.KonversationItem {display: grid; grid-template-columns: min-content auto min-content; align-items: center;}
	.KonversationItem .KonversationGruppe {grid-row: 1/2; grid-column: 1/2;}
	.KonversationItem .Anzahl {grid-row: 1/2; grid-column: 3/4;}
	.KonversationItem .KonversationVersendet {grid-row: 1/2; grid-column: 2/3; text-align: left; justify-self: start;}
	.KonversationItem .KonversationItemNachricht {grid-row: 2/3; grid-column: 1/4;}
	.Konversationsliste {gap:  var(--abstand_doppelt);}
}
@media only screen and (max-width: 1000px)
{
	.maingrid {grid-template-columns: 1fr;}
	.MitarbeiterUndKunden
	, .dragpanel
	{
		display: none;
	}
}
@media only screen and (max-width: 800px)
{
	#Vorgaenge .VorgaengeContainer > div:first-child {margin-top: var(--abstand);}
	#startseite .aktuelleTermine
	{
		display: flex;
		gap: var(--abstand);
		flex-direction: column;
		margin: var(--abstand) var(--abstand) 0 var(--abstand);
	}
	#startseite .VorgangStartseite .flexCentered {padding: var(--abstand); flex-wrap: wrap;}
	#startseite .VorgangStartseite .flexCentered > div {flex: 1;}
	#startseite .VorgangStartseite .Vorgang {flex-basis: 100%;}
	#startseite .VorgangStartseite .red {padding: 0 !important;}
	#startseite .VorgangStartseite .flexCentered:first-child {flex-basis: 100%;}
	#startseite .VorgangKopf {display: none;}
	.maingrid .Box {border-radius: 0;}
	.maingrid #Vorgaenge {grid-column: 1/-1; grid-row: auto;}
	.maingrid #warten {grid-row: auto;}
	.maingrid #Applikationen {grid-row: auto;}
	#header {position: relative;}
	#Verteilernavigation
	, .links
	, .rechts
	, #Planung .Vergangenheit
	, .Vorgangsbuttons
	, #hintergrund
	, .Textauswahl
	, .sms
	{display: none;}
	.layoutgrid {max-width: 100vw; overflow: hidden;}
	.BenachrichtigungHauptbereich {padding: 0; overflow: hidden;}
	.ContainerFuerShadowDom, .NachrichtOffen {border-radius: 0; border: 0;}
	.NachrichtenControls {padding: var(--abstand);}
	.PostkorbStartseite {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-snap-points-x: repeat(100vw);
		padding: 0;
		margin-top: 0;
		margin-bottom: 60px;
		background: none;
		min-height: 100svh;
	}
	.maingrid #warten
	, .maingrid #Applikationen
	, .maingrid #Vorgaenge
	{
		grid-column: 1/-1;
	}
	.maingrid {padding: 0;}
	.PostkorbStartseite .maingrid {display: block;}
	.PostkorbStartseite .BenachrichtigungButtons {margin: 0 var(--abstand);}
	.PostkorbStartseite .Nutzung {flex-wrap: wrap;}
	.PostkorbStartseite .Nachricht {background: #fffc; border-radius: 0;}
	.PostkorbStartseite .NachrichtNichtIntern {flex-direction: column;}
	#Benachrichtigungen {padding: var(--abstand);}
	#Benachrichtigungen .maingrid {display: block;}
	.NachrichtPosteingang {
		position: relative;
		scroll-snap-align: start;
		min-height: 80vh;
		display: block;
		box-sizing: border-box;
		background: white;
	}
	.NachrichtPosteingang .Buttonliste {
		gap: var(--abstand) !important;
	}
	.NachrichtPosteingang a.button {border-radius: 50px;}
	.PostkorbStartseite .NachrichtInhaltPanel {border-width: 0; padding: 0 var(--abstand); background: #fffd;}
	.PostkorbStartseite .NachrichtInhaltAllesAnzeigen {background: #fffe; padding: var(--abstand);}
	.NachrichtInhaltPanel {max-width: calc(100vw - 30px);}
	#Vorgaenge .VorgaengeContainer #VorgaengeAktuell {border-radius: 0;}
	#Benachrichtigungen {padding: 0;}
	#Benachrichtigungen .BenachrichtigungenGrid {padding: 0;}
	.Benachrichtigung {box-shadow: none; border-radius: 0; max-width: 100vw;}
	#Vorgaenge .verpasst {
		margin: 15px;
		border: solid red 1px;
		border-radius: var(--abstand) !important;
	}
	#Vorgaenge .verpasst .Kopf {margin: 0; width: auto; border-right-width: 0;}
	#startseite .Termin .Zeit {margin: 0; width: auto; font-size: 1rem;}
	#startseite .Box.verpasst {flex-direction: column;}
	#startseite .aktuelleTermine .VorgangStartseite {flex-direction: column;}
	#startseite .Box.naechsterTermin {flex-direction: column; margin: 0 auto; padding: var(--abstand);}
	#startseite #content > div {gap: 0;}
	.PostkorbStartseite .Vorgang_name {text-overflow: initial; overflow: visible; max-width: auto; white-space: normal;}
}