:root
{
	--abstand: 15px;
	--abstand_halb: calc(var(--abstand) / 2);
	--abstand_doppelt: calc(var(--abstand) * 2);
	--radius: var(--abstand);
	--radius_halb: calc(var(--radius) / 2);
	--link_color: #124166;
	--hintergrund: #eeeeee; /*#e6e6ee*/
	--hintergrund_auf_hintergrund: white;
	--hoehe_sticky0: 0;
	--hoehe_sticky1: 0;
	--hoehe_sticky2: 0;
	--hoehe_sticky3: 0;
	--outline: 2px solid red;
	--button_hintergrund: #225176 /*neu: #226b97, orginal: #4d7187*/;
	--button_color: white /*neu: #226b97, orginal: #4d7187*/;
	--backdrop_blur: blur(4px);
	--lesebreite: 80ch;
	--hintergrundschatten: black 0 0 var(--abstand_doppelt) calc(var(--abstand) * -1);
	--rauchglas: #0009;
	--shadow: black 0 0 4px -2px;
	--darker: #0400040a;
	--brighter: rgba(255, 255, 255, 0.3);
	--weiss_transparent: rgba(255, 255, 255, 0.9);
}
.grey 		{color: grey;}
.red 		{color: #880000;}
.green 		{color: #008800;}
body .Fehler 	{color: red;}
body .Fehler a 	{color:red;}
.ok 		{background: rgb(198, 224, 198); padding: var(--abstand); border-radius: var(--abstand);}
.flexcolumn {display: flex; flex-direction: column; gap: var(--abstand);}
.sticky0 {position: sticky; z-index: 100000; top: var(--hoehe_sticky0);}
.sticky1 {position: sticky; z-index: 100000; top: var(--hoehe_sticky1);}
.sticky2 {position: sticky; z-index: 100000; top: var(--hoehe_sticky2);}
.sticky3 {position: sticky; z-index: 100000; top: var(--hoehe_sticky3);}
.balken_container {
	overflow: hidden;
	height: 100%;
	width: 100%;
	position: relative;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	background: #0002;
	border-radius: 3px;
}
.outlineRed {outline: var(--outline);}
.error
{
	clear: both;
	background-color: #FE8C8C;
	color: black;
	font-family: arial;
	padding: var(--abstand);
	font-size: 14px;
	position: relative;
	z-index: 5000;
	margin: var(--abstand);
	text-align: left;
	border-radius: 3px;
	display: block;
}
.error table 			{border-spacing: 1px;}
.error td 				{padding: 1px; vertical-align: top;}
.error td:first-child 	{background-color: #eee;}
.cmxinfo 				{color: blue; font-family: arial, verdana;
	padding: 2px; border-width: 0px 0px 1px 0px;
	border-style: solid; border-color: #dadada;}
.cmx_clearfix 			{display: block;height: 0px;line-height: 0px;clear: both;font-size: 0px;}
input 					{padding: 0px; border-width: 1px;}
input[type=submit]		{padding: 1px 5px 1px 5px;}
textarea 				{padding: 1px; border-width: 1px;}
div.panelBenachrichtigung	{background: white; padding: calc(2 * var(--abstand)); position: relative; z-index: 99999999; align-items: baseline; justify-content: center; }
div.panelBenachrichtigung>* {flex-grow: 0;}
.panelBenachrichtigung a {cursor: pointer; font-family: arial;}
.cmx_modul 				{padding: 0px 2px 0px 2px; margin: -3px 0px -3px 0px; background-color: #fff; font-weight: normal;
border: 1px solid #69f; position: relative; z-index: 999999; font-family: arial; overflow: hidden;
line-height: 12px; font-size: 11px; cursor: pointer; text-decoration: none; color: #69f; pointer-events: initial;}
.GUIObjektlink {
	padding: 5px;
	font-size: 1rem;
	font-weight: normal;
	position: relative;
	display: none !important;
	font-family: arial;
	white-space: nowrap;
	color: #69f;
}
.GUIObjektlinkTemplate {padding: var(--abstand); margin: 0; line-height: 16px; border: 1px red dashed;}
.GUIObjektlinkDokument {font-weight: bold;}
.cmxModulliste {
	position: absolute;
	z-index: 99999999999;
	background: white;
	box-shadow: black 1px 1px 3px -1px;
	padding: 30px;
}
#cmx_optionpanel {
	display: flex;
	gap: var(--abstand);
	padding: 5px;
	background-color: #fff;
	font-size: 1rem;
	font-weight: normal;
	font-family: arial;
	position: fixed;
	z-index: 9999999;
	right: 100px;
	bottom: 0px;
	box-shadow: black 0 0 3px -1px;
	border-radius: 2px;
}
#cmx_seiteBearbeiten {
	padding: 5px;
	background-color: #fff;
	font-size: 2rem;
	font-weight: normal;
	font-family: arial;
	position: fixed;
	z-index: 9999999;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: solid red 1px;
	text-align: center;
}
.cmxModulliste .GUIObjektlink {display: block !important;}
.cmx_formarea {
	margin: auto;
	display: table;
	width: 340px;
	z-index: 10;
	position: relative;
	background-color: #0002;
	padding: 30px;
	border-radius: 4px;
}
.cmx_form {font-family: arial;}
.cmx_user_panel {
	position: relative;
	top: 30vh;
	background: linear-gradient(90deg,#fff0,#fffb,#fffb,#fff0);
	font-size: 1rem;
	padding: 60px var(--abstand) 60px var(--abstand);
	overflow: hidden;
	box-shadow: #000 1px 1px 4px -2px;
	background-position: center;
}
.cmx_user_textbox
{
	width: 100% !IMPORTANT;
	border: 1px solid gray !IMPORTANT;
	padding: 8px 10px 8px 10px !IMPORTANT;
	box-sizing: border-box;
}
.cmx_login_button {
	padding: 8px 10px 8px 10px !IMPORTANT;
	width: 100%;
	font-weight: bold;
	border: solid 1px gray;
}
.cmx_login .cmx_form {margin-bottom: 0px;}
.cmx_user_passwordbox {
	width: 100% !IMPORTANT;
	border: 1px solid gray !IMPORTANT;
	border-width: 1px 1px 0px 1px !IMPORTANT;
	padding: 8px 10px 8px 10px !IMPORTANT;
}
.cmx_passwordbar {
	margin: 0px -6px 0px 0px;
	border: solid grey 1px;
	border-width: 1px 1px 1px 1px !IMPORTANT;
	border-top: 1px #777777 dashed;
	background-color: #f8f8f8;
	color: grey;
	padding: 1px 1px 1px 3px;
}
.blink {animation: blink 0.7s steps(10, start) 3;}
@keyframes blink
{
	to
	{
		border-color: #fff;
	}
}
.multicol, .flex 		{display: flex; flex-wrap: wrap; align-items: flex-start;}
.flex_nowrap 			{flex-wrap: nowrap;}
.flex_nowrap_important 	{flex-wrap: nowrap !important;}
.flex_nowrap_important .multicol {flex-wrap: nowrap;}
a.cmx_dbchar
, a.cmx_dbchar:hover {text-decoration: none; color: #124166; cursor: pointer;}
.blink {
	animation: animationblink 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
}
@keyframes animationblink {
	0% 		{}
	25% 	{background: #0001;}
	50% 	{background: #0000;}
	75% 	{background: #0001;}
	100% 	{}
}
.snapshot
{
	animation: snapshot 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
}
@keyframes snapshot {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
.Unterschriftenfeld {
	position: relative;
	box-sizing: border-box;
	border: dashed gray 2px;
	padding: 30px;
	text-align: center;
	font-size: 2rem;
	color: lightgray;
	max-height: calc(60px + 3rem + 4px);
	overflow: hidden;
	margin-bottom: 5px;
	width: 100%;
}
.Unterschriftenfeld img {position: absolute; top: 0; left: 0; max-width: calc(100vw - 60px);}
.UnterschriftFullscreen img {display: none;}
.UnterschriftFullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: white;
	z-index: 99999;
	writing-mode: vertical-lr;
	border-width: 0;
}
.Unterschriftenfeld.UnterschriftFullscreen {max-height: inherit;}
.UnterschriftButtonOk {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 115px;
	right: 30px;
	background: white;
	color: green;
	writing-mode: vertical-lr;
	border-radius: 30px;
	border: solid green 2px;
	display: none;
	transform: rotate(-90deg);
}
.UnterschriftButtonCancel {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 180px;
	right: 30px;
	background: white;
	color: red;
	writing-mode: vertical-lr;
	border-radius: 30px;
	border: solid red 2px;
	display: none;
	transform: rotate(-90deg);
}
.Unterschriftenfeld canvas {display: none;}
@media (orientation: portrait) {
	.UnterschriftFullscreen canvas {
		display: block;
		width: 50vw;
		height: calc(100vh - 120px);
		border: 2px dashed gray;
		margin: auto;}
	.UnterschriftFullscreen .Unterschrifttext {
		transform: rotate(180deg);
	}
}
@media (orientation: landscape) {
	.UnterschriftFullscreen canvas {
		display: block;
		width: calc(100vw - 240px);
		height: calc(100vh - 120px);
		border: 2px dashed gray;
		margin: auto;}
	.UnterschriftFullscreen {
		writing-mode: horizontal-tb;
	}
	.UnterschriftButtonOk {
		transform: rotate(0deg);
	}
}
.UnterschriftFullscreen .UnterschriftButtonOk {display: block;}
.UnterschriftFullscreen .UnterschriftButtonCancel {display: block;}
.UnterschriftItem {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--abstand);
	padding: var(--abstand);
	box-sizing: border-box;
	border: solid gray 1px;
}
.UnterschriftItem>div:first-child {font-size: 2rem; flex: 1; text-align: right;}
.UnterschriftItem>*:nth-child(2) {flex: 1; border-left: 1px solid lightgray; padding-left: var(--abstand);}
.UnterschriftItem>strong:nth-child(2) {font-size: 2rem; display: block;}
.UnterschriftItem fieldset {display: flex; gap: var(--abstand); flex-wrap: wrap;}
.loading {
	transition-delay: .5s;
	transition: all 1s ease-in;
	opacity: 0.5;
}
.htmleditor {
	position: relative;
	z-index: 1000;
	background-color: rgba(255,255,255,0.7);
	cursor: text;
	min-width: 200px;
}
.Hintergrund > * {z-index: 20;}
.HintergrundFixed header {background: none;}
.HintergrundFixed header.sticks {background: white;}
.HintergrundContainer
{
	position: absolute;
	overflow: hidden;
	top: 0; right: 0; bottom: 0; left: 0;
	max-width: none;
	z-index: 10;
}
.HintergrundContainer > div
, .HintergrundContainer > video
{
	position: absolute;
	object-fit: cover;
	opacity: 0;
	top: 0; right: 0; bottom: 0; left: 0;
	min-width: 100%;
	min-height: 100%;
	background-repeat: no-repeat !important;
	background-size: cover;
	background-position: center;
	z-index: 5;
}
.HintergrundContainer.inaktiv
{
	transition: 3s ease;
	filter: grayscale(1);
}
.fensterbreit:not(.HintergrundFixed) .HintergrundContainer > div
{
	animation: 8s cinematic forwards;
	/* animation-delay: 2s; */
}
body:not(.HintergrundFixed) > .HintergrundContainer > *
{
	animation: 25s cinematic_rotate;
	animation-delay: 9s;
	animation-iteration-count: infinite;
}
.startStop
{
	position: absolute;
	right: var(--abstand);
	bottom: var(--abstand);
	background: var(--rauchglas);
	color: white;
	width: max-content;
	z-index: 10;
}
body > div > .startStop {position: fixed; right: var(--abstand); bottom: var(--abstand);}
div.HintergrundFadeIn
, video.HintergrundFadeIn
{
	transition: opacity 3s ease;
	opacity: 1;
}
.HintergrundFadeOut
{
	transition: opacity 3s ease;
	opacity: 0;
}
.HintergrundFixed > div > div {background-attachment: fixed;}
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
	.Unterschriftenfeld {display: block;}
	.UnterschriftCheckbox {display: none;}
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
	.Unterschriftenfeld {display: none;}
	.UnterschriftCheckbox {display: block;}
}
/*AV 30.08.2019*/
@media (max-width: 768px)
{
	.cmx_formarea 		{width:320px;}
	.cmx_user_textbox 	{padding: 18px 10px 18px 10px !important;}
	#subbut 			{padding: var(--abstand) !important;}
	.UnterschriftItem {grid-template-columns: 1fr;}
	.UnterschriftItem>*:nth-child(2) {border-left: 0px; padding-left: 0; text-align: center;}
	.UnterschriftItem>div:first-child {text-align: center;}
	.sticky0
	, .sticky1
	, .sticky2
	, .sticky3 {position: relative;}
	.nichtViewport {opacity: 1;}
}
@media (min-width: 1000px)
{
	.HintergrundContainer 	{display: block;}
}
@media only screen and (min-width: 1215px)
{
	/*Animationen*/
	.nichtViewport.Hereingleiten
	, .nichtViewport.Hochskalieren
	, .nichtViewport.Einblenden {opacity: 0;}
	.viewportTop.Hereingleiten
		, .Liste.Hereingleiten > .viewportTop {animation: animationslideInTop .7s;}
	.viewportBottom.Hereingleiten
		, .Liste.Hereingleiten > .viewportBottom {animation: animationslideInBottom .7s;}
	.viewport.Einblenden
		, .Liste.Einblenden>.viewport {animation: animationfadeIn .7s;}
	.viewportTop.Hochskalieren
		, .Liste.Hochskalieren > .viewportTop {animation: animationScaleIn .7s; transform-origin: top;}
	.viewportBottom.Hochskalieren
		, .Liste.Hochskalieren > .viewportBottom {animation: animationScaleIn .7s; transform-origin: bottom;}
	.nearViewport.Hereingleiten
		, .Liste.Hereingleiten > .nearViewport {transition: 0; opacity: 0;}
	.nearViewport.Einblenden
		, .Liste.Einblenden > .nearViewport {transition: 0; translate: 0 -100%;}
	.nearViewport.Hochskalieren
		, .Liste.Hochskalieren > .nearViewport {transition: 0; transform: scale(95%);}
	.viewport {visibility: visible;}
	.fadeIn {animation: animationfadeIn .7s;}
	@keyframes animationfadeIn {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	.slideInTop {animation: animationslideInTop .7s;}
	@keyframes animationslideInTop {
		from {opacity: 0; translate: 0 -20%;}
		to	{opacity: 1; translate: 0;}
	}
	.slideInBottom {animation: animationslideInBottom .7s;}
	@keyframes animationslideInBottom {
		from {opacity: 0; translate: 0 20%;}
		to   {opacity: 1; translate: 0;}
	}
	.slideInRight {animation: animationslideRight .7s;}
	@keyframes animationslideRight {
		from {opacity: 0; translate: 100vw;}
		to   {opacity: 1; translate: 0;}
	}
	.slideInLeft {animation: animationslideLeft .7s;}
	@keyframes animationslideLeft {
		from {opacity: 0; translate: -100vw;}
		to   {opacity: 1; translate: 0;}
	}
	.scaleIn {animation: animationScaleIn .7s; transform-origin: bottom;}
	@keyframes animationScaleIn {
		from {opacity: 0; transform: scale(95%);}
		to   {opacity: 1; transform: scale(100%);}
	}
	.hueRotate {animation: animationhueRotate 1.7s ease-out;}
	@keyframes animationhueRotate {
		from {filter: hue-rotate(110deg);}
		to   {filter: hue-rotate(0);}
	}
}