html, body {background:#00294A;#222;color:#bbb;margin:0;padding:0; font-family: 'Rajdhani',sans-serif}
body * {color:inherit;box-sizing: border-box;font:inherit}

b,strong{font-weight:700}

main {margin:0;padding:1rem 0;xborder-bottom:1px solid #f00;min-height:100%}

:root{
	--navspace: 2rem;
	--footheight: 3rem;
	--fingersize:2.4rem;
}

.pdTar {text-align:right}
.pdB {font-weight:bold}

main {border-top:3px solid #bdcd00;}

	.loading{background:url(https://appins.de/svg/loader/blocks.svg?c=hbdcd00) 50% 2em no-repeat;min-height:4em}

	td {vertical-align:top}

	.sonh_c {opacity:0}
	.sonh_p:hover .sonh_c {opacity:1}

	.btn {cursor:pointer}
	.hlp {cursor:help}

	#main {padding:0 1rem 2rem;overflow:hidden} 
		#frmlogin {display:block;width:80%;max-width:500px;margin:3em auto;}
		#frmlogin .t label {background:#333;display:inline-block;margin-right:2px;border-radius:5px 5px 0 0;padding:1em}
		#frmlogin .t input {visibility:hidden;display:none}
		#frmlogin .b,#frmlogin .t input:checked+label {background:#bdcd00;color:#000}
		#frmlogin .b {border-radius:0 5px 5px 5px;padding:2em;}
		#frmlogin .b label:not([type=checkbox]+label){display:block}
		#frmlogin .b input:not([type=checkbox]){display:block;width:100%;padding:.6em;margin:.3em 0 20px;border:1px solid gray}
		#frmlogin .b button{cursor:pointer;background:#fff;border:0;padding:.8em;float:right}
		#frmlogin .strongpw {display:none/*noch ohne funktion*/;height:4px;position:relative;margin:-16px auto 1em;
			background: rgb(255,0,0);
			background: -moz-linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,248,0,1) 60%, rgba(31,180,0,1) 100%);
			background: -webkit-linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,248,0,1) 60%, rgba(31,180,0,1) 100%);
			background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,248,0,1) 60%, rgba(31,180,0,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#1fb400",GradientType=1);}
		#frmlogin .strongpw>div {position:absolute;z-index:2;top:-4px;left:0%;Border:7px solid transparent;border-top-color:gray}
		#frmlogin.login .showOnRegister {display:none}
		#frmlogin.register .showOnLogin {display:none}
		#frmlogin .errMsg {border: 1px solid;color: red;font-size:.7em;background: #fff;padding: 4px;margin-bottom:1.2em}
		#frmlogin .logo {text-align:center;color:#bdcd00;margin-bottom:1em;font-size:1.3em}
		#frmlogin .logo img{border-radius:50%;background:#fff;padding:.5em;margin-bottom:.2em;}

		.empty {background:rgba(255,255,255,.1);width:80%;margin:3em auto;text-align:center;padding:2em}
		.empty .choose {display:flex;justify-content: space-around;}
		.empty .choose .choice {width:40%;border:1px solid #bdcd00;text-align:center;padding:1em;cursor:pointer;color:#fff}
		.empty .choose .choice span {display:block;margin:1em auto}
		.empty .choose .choice div {font-size:12px;padding:1em}
		.empty .choose .choice .second {position:relative;left:1.1em;top:1.1em;color:#bdcd00}
		#mainlist.empty{width:100%;margin:1em auto;padding:1em}
		#mainlist.empty h1{margin-bottom:.2em}
		#mainlist.empty p{margin:.2em}
		#mainlist.empty .table{width:100%;text-align:left;font-size:1.2em;}
		#mainlist.empty .tr{clear:both;padding-top:2px}
		#mainlist.empty .table:after{clear:both;content:"";display:block;}
		#mainlist.empty .td{float:left;width:20%}
		#mainlist.empty .thead .td{font-size:.8em;}
		#mainlist.empty em {display:none}
		#mainlist .button {background:#bdcd00;color:#000;border:0;padding:.4em;border-radius:3px;cursor:pointer;display:inline-block;font-size:.8em}
		#mainlist.empty .tr .bg	{display:none}
		@media only screen and (max-width:800px) {
			#mainlist.empty .tr	{margin-top:1em;position:relative;padding:0}
			#mainlist.empty .thead.tit, #mainlist.empty .td.nixmob{display:none}
			#mainlist.empty .td {position:relative;padding:.2em;float:unset;width:100%}
			#mainlist.empty .tr:not(.thead) .td {border-top:1px solid rgba(255,255,255,.1);#00294A;font-size:1rem;}
			#mainlist.empty em {display:block;position:absolute;top:1px;right:1px;background:rgba(255,255,255,.1);#00294A;color:#fff;font-size:.7em;padding:.2em .4em}
			
			#mainlist.empty .tr .slide	{background:#00294A;z-index:1;position:relative}
			#mainlist.empty .tr .bg	{white-space: nowrap;overflow: hidden;background: darkred;position: absolute;left: 0;top: 0;bottom: 0;width: 100%;display:flex;place-content: space-between;}
			#mainlist.empty .tr .bg>*{color:red;padding:2.3em 1em}	
		}

		.block {background:rgba(255,255,255,.1);width:90%;margin:1em auto;}
		.block table {width:100%;}
		.block table thead{background:rgba(255,255,255,.4);color:#00294A}
		.block table tr, .block table td{margin:0}
		.block table td, .block p, .block .paddmarg {padding:.4em;margin:0}
		.block button, .block .button {background:#bdcd00;color:#000;border:0;padding:.8em;float:right;cursor:pointer}
		.block button.warn, .block .button.warn {background:#cd3900;color:#fff}
		.block button.left, .block .button.left {float:none;display:inline-block}
		.block input {border:1px solid;color:#bdcd00;border-radius:3px;background:none;padding:.3em;}
		.block input[type=number]{text-align:right}
		.block.prices {font-size:1.1em;padding:.6em;text-align:right}
		.block.prices span{display:inline-block;width:8em;}
		.block.prices #sum, .block.prices #safed{font-weight:bold}
		label.bll {display:block;margin-top:.3em}
		.frmpart {padding: 1em !important;}
		.block.frmwidth label.bll, .block.frmwidth input:not([type=radio]):not([type=checkbox]), .block.frmwidth .fw {display:block;width:99%;margin:0 auto}
		.block.frmwidth input:not([type=radio]):not([type=checkbox]) {margin:0 auto 1em}
		.block.frmwidth .fw label.bll {margin:unset}
		.block.frmwidth .fw input:not([type=checkbox]) {margin:0 0 1em}
		.block.frmwidth input[type=checkbox]+label span[onclick]{border-bottom:1px solid;color:#a9c2d7}
		#bills a {text-decoration:none;color:inherit}
		#bills a span {border-bottom:1px solid}
		.err {border:1px solid;color:red;background:#fff;text-align:center;padding:.5em;margin:0 .5em .5em}

		.empty h1,.block  h1 {display:block;font-weight:100;font-size:2em}

		.full {background:rgba(255,255,255,.4);position:fixed;top:0;left:0;bottom:0;right:0;padding:1rem;z-index:20}
		.full .hideit {position:fixed;color:#fff;right:1.3rem;top:1.3rem;font-size:var(--fingersize);z-index:1000}
		.full form {display:block;background:#00294A;padding:3em;max-height:100%;overflow:auto;transform:height .2s}
		.full form label, .full form input:not([type=hidden]):not([type=checkbox]), .full form select {display:block;width:100%}
		.full form input:not([type=submit]) ,.full form select {background:#f4f4f4;color:#00294A;font-size:1em;padding:.5em .3em;border:0}
		.full form label {margin:.3em .1em;font-size:.9em;}
		.full form input[type=checkbox]+label {display:unset;margin:.3em .1em;font-size:.9em;}
		.full form label.mark, .colhl {color:#bdcd00;}
		.full .big {margin-top:1.4em;padding:0 2em 0 .5em;}
		.full .big.addamount {color:#bdcd00;margin-top:1.4em;padding:0 .6em 0 .8em}
		.full .big>div {font-size:1.5em;}
		.full .space {padding-left:.8em}
		.full .next2 {display:flex}
		.full .next2 .inpwrap:last-child {margin-left:1em}
		@media only screen and (max-width:500px) {
			.full .next2 {flex-direction:column}
			.full .next2 .big.before>div:after {content:"..."}
			.full .next2 .inpwrap {margin-left:2em !important}
			.full .next2 .after {margin-top:.2em;margin-bottom:1em}
		}
		.full button, .full .button {background:#bdcd00;color:#000;border:0;padding:.8em;float:right;cursor:pointer}
		.full button.warn, .full .button.warn {background:#cd3900;color:#fff}
		.full button.left, .full .button.left {float:none;display:inline-block}
		.res {text-align:center;padding:.3em;transition:background .5s;}
		.res.hightlight {background:#fff}
		.res.shown {background:grba(255,255,255,.3)}
		h1.formfunc {color:#bdcd00;font-size:1.4em}
		.colored {color:#bdcd00;}
		#mainlist h1 {margin-top:0}
		#mainlist table span {font-size:.8em}
		.empty button {cursor:pointer;margin-top:1em;padding:0 1rem 0;font-size:1rem;border-radius: 3px;border:1px solid #bdcd00;background:#bdcd00;color:#00294A}

		.inpwrap {margin-bottom:1em}
		.suggs {font-size:.9rem;padding:0;transition:height .2s}
		.suggs ul {list-style:none;padding:0;margin:0;max-height:calc(5.5 * (1.8em + 1px));overflow:auto}
		.suggs ul li {background:rgba(255,255,255,.4);color:#00294A;padding:0 .4em;height:1.8em;line-height:1.8em;margin:0 0 1px;cursor:pointer}

		.frmupl {position:relative}
		.frmupl .start {color:#00294A;background-color:#bdcd00;display: inline-block;cursor: pointer;padding:.3rem .5rem;position:absolute;right:0;top:2px;border-radius:3px}
		.frmupl .frm {text-align:left;background:rgba(255,255,255,.4);color:#00294A;padding:1em;}
			.frmupl .frm p{font-size:.9em}
		.frmupl .uplbtn {width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1;}
		.frmupl .uplbtn + label {margin-top:2px;color:#00294A;border:2px solid transparent;background-color:#bdcd00;display: inline-block;cursor: pointer;padding:.3rem .5rem;xposition:absolute;xright:0;xtop:2px;}
		.frmupl .uplbtn:focus + label,.frmupl .uplbtn + label:hover {border-color: #bdcd00;}
		.frmupl .uplbtn:focus + label {outline: 1px dotted #000;outline: -webkit-focus-ring-color auto 5px;}
		.frmupl .uplbtn + label * {pointer-events: none;}
		.frmupl .meter .errMsg  {color:red;background:white;font-size:.9em;padding:.3em;}
		.frmupl .meter i {display:block;height:2px;width:0;background:#bdcd00}

		#businesstype {display:flex;justify-content: space-around;}
		#businesstype label {transform:scale(.9);text-align:center;border:1px solid;color:inherit;width:25%;position:relative;padding-bottom:2em;transition:all .2s}
		#businesstype label>* {display:block}
		#businesstype label>b {font-size:1.3em;padding:.5rem 0}
		#businesstype label>i {font-size:3em;padding:.5rem}
		#businesstype label>span {padding:.5rem;position:absolute;bottom:0;left:0;right:0;font-size:.9em}
		#businesstype input {visibility:none;display:none}
		#businesstype input:checked+label {transform:scale(1);color:#bdcd00}
		@media only screen and (max-width:700px) {
			#businesstype label {width:29%;}
		}
		@media only screen and (max-width:500px) {
		#businesstype {flex-direction:column}
			#businesstype label {width:94%;margin:0 3% 1em}
		}

		#sharelist {display:flex;justify-content: center;space-around;Margin:2em auto;flex-flow:wrap}
		#sharelist >div{padding:1em .7em 0}
		#sharelist >div *{vertical-align:sub}
	
	#catnav {-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Standard syntax */}
	#catnav ul {display:flex;list-style:none;margin-top:0;padding:0 1rem 0;overflow:auto}
	#catnav li {cursor:pointer;font-size:1rem;border:1px solid #bdcd00;background:#00294A;display:flex;align-items:center}
	#catnav li.cat.old {color:#fff;border-color:#fff}
	#catnav li.cat,#catnav li.add {z-index:1;padding: .5em .8em;margin-right: .4em;border-radius: 3px;}
	#catnav li.catedit {left:-2em;margin: .4em -1.2em .4em -.4em;padding: .1em .6em;border-radius: 0 3px 3px 0;border-left: 0;position:relative;transition:left .2s, margin .2s}
	#catnav li.cat.active+li.catedit {display: flex;left:0;margin-right:.4em}
	#catnav .active {background:#bdcd00;color:#00294A}
	#catnav li.cat.old.active {background:#fff;color:#00294A}
	#catnav ul:after {content:"";padding:0 .3rem;display:list-item;}

	#itemlist {margin-bottom:2rem;var(--footheight)}
	#itemlist .item {height:6em;width:100%;background:silver;position:relative;margin-bottom:1em;border-radius:5px}
	#itemlist .item.onZero {opacity:.5}
	#itemlist .item.onZero h2 .a+span {display:none}
	#itemlist h2 {position:absolute;top:0;left:0;padding:.3em;z-index:3;color:#fff;margin:0;font-size:1.3rem;font-weight:700}
	#itemlist h2 span {font-weight:100}
	#itemlist .slide {position:absolute;left:0;top:0;bottom:0;width:100%;z-index:2;background:#497394;border-radius:5px}
	#itemlist .slide.smooth {transition:left .2s}
	#itemlist .slide>div {margin:2rem .8rem .5rem;Color:#fff}
	#itemlist .btngroup {position:absolute;top:0;bottom:0;width:40%;display:flex;flex-direction:column;justify-content:center;border-radius:5px;}
	#itemlist .btngroup>div {display:flex;}
	#itemlist .btn2left {left:0;background: rgb(189,205,0);
			background: -moz-linear-gradient(90deg, rgba(189,205,0,1) 43%, rgba(189,205,0,0) 90%);
			background: -webkit-linear-gradient(90deg, rgba(189,205,0,1) 43%, rgba(189,205,0,0) 90%);
			background: linear-gradient(90deg, rgba(189,205,0,1) 43%, rgba(189,205,0,0) 90%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bdcd00",endColorstr="#bdcd00",GradientType=1);}
	#itemlist .btn2right>div {justify-content:flex-end}
	#itemlist .btn2right {right:0;background: rgb(205,57,0);
			background: -moz-linear-gradient(90deg, rgba(205,57,0,0) 10%, rgba(205,57,0,1) 57%);
			background: -webkit-linear-gradient(90deg, rgba(205,57,0,0) 10%, rgba(205,57,0,1) 57%);
			background: linear-gradient(90deg, rgba(205,57,0,0) 10%, rgba(205,57,0,1) 57%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cd3900",endColorstr="#cd3900",GradientType=1);}
	#itemlist .item .button {cursor:pointer;position:relative;height:3em;min-width:3em;border-radius:1em;line-height:3em;margin:.5em;padding:0 .3em;background:rgba(0,0,0,.3);border:1px solid #333;text-align:center}
	#itemlist .item .button .fa-stack-2x {top:.2em}
	#itemlist .item .button .fa-stack-1x {top:-.8em}
		#itemlist .item .button .bubble {content:"";font-size:2em;background: rgb(255,255,255);
background: -moz-radial-gradient(circle, rgba(255,255,255,1) 34%, rgba(255,255,255,0) 70%);
background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 34%, rgba(255,255,255,0) 70%);
background: radial-gradient(circle, rgba(255,255,255,1) 34%, rgba(255,255,255,0) 70%);color:#000;text-align:center;width:1.8em;height:1.8em;line-height:1.8em;transform:scale(.4);transition:transform .4s, opacity .5s;opacity:.8;position:absolute;top:-.4rem;left:-.4rem;z-index:2;border-radius:50%;transform-origin:center}
		#itemlist .item .button .bubble.growup {transform:scale(1);opacity:0}

	#floatAddItem{position:fixed;bottom:calc(var(--footheight) + 1rem + .6rem);right:.6rem;width:var(--fingersize);height:var(--fingersize);line-height:calc(var(--fingersize) + .2rem);text-align:center;border-radius:50%;background:#bdcd00;color:#00294A;z-index:10}
	
	#footnav {position:fixed;bottom:0;left:0;right:0;autoheight:3rem;background:#666;z-index:15;padding:.5rem;display:flex;justify-content: space-between;}
		#nav1 li {display:block;text-align:center}
		#nav1 li:not(.spacer) {padding:0 1em;line-height:var(--footheight)}
		#nav1 li.spacer {padding:.5em}
		#nav1 li.spacer:after {content:"";display:block;background:#00294A;height:1px;}
		#nav1 li a,#nav1 li label {text-decoration:none;display:block}
		#nav1 .active {background:rgba(0,0,0,.1);	}
		#nav1 .active a {}
		#opennav1{position:absolute;visibility:hidden;z-index:-2000;cursor:pointer}
		#opennav1~label {display:none}
		#nav1 {
			background:#bdcd00;color:#00294A;
			position:fixed;
			width:100%;height:calc(100% - var(--footheight));
			left:0;top:0;z-index:14;
			transform:translateY(110%);
			transition:.3s ease-in;
			margin:0;padding:var(--navspace) var(--navspace) calc(var(--navspace) / 2) ;
			display:flex;flex-direction:colums;
		}
		#nav1 >header {margin-bottom:calc(var(--navspace) / 2);line-height:2rem;background:#fff}
		#nav1.short >header>i, #nav1.long >header>div {display:none}
		#nav1.long >header {height:2rem;}
		#nav1.short >header>div {text-align:left;height:40vh;line-height:1.6em;padding:.6em;overflow:auto}
		#nav1 >header img {height:1.6em;margin:.2em;vertical-align:bottom}
		#nav1 >footer {margin-top:calc(var(--navspace) / 2);font-size:.8rem;line-height:1rem}
		#nav1 >footer img{vertical-align: bottom;}
		#nav1>ul{
			display:block;
			list-style:none;
			width:100%;
			margin:0;padding:0
		}
		#nav1.short  >ul{height:calc(100% - var(--navspace) - 1rem - 2rem - 40vh)/*head und foot der nav-section*/;}
		#nav1.long>ul{height:calc(100% - var(--navspace) - 1rem - 2rem)/*head und foot der nav-section*/;}
		#opennav1~label{display:block;z-index:16;padding:1vh}
		/*#opennav1~label>div{height:.5vh;width:4vh;background:#fff;margin:1vh;padding:0;transition:.3s;cransform-origin:0 0}*/
		#opennav1:checked ~ #nav1 {
			display:flex;flex-direction: column;
			transform:translateY(0%);
		}
		:root{--x:1.1vh; --xx:-1.1vh}
		/*#opennav1:checked ~ label>div:nth-of-type(1) {cbackground:red;transform:rotate(45deg) translate(var(--x),var(--x))}
		#opennav1:checked ~ label>div:nth-of-type(2) {cbackground:blue;opacity:0}
		#opennav1:checked ~ label>div:nth-of-type(3) {cbackground:yellow;transform:rotate(-45deg) translate(var(--x),var(--xx));}*/
		#opennav1:checked ~ label>i:first-child, #footnav:not(.opened) #copyright {display:none}
		#opennav1:not(:checked) ~ label>i:last-child, #footnav.opened #search {display:none}
		#copyright, #search,#search input{line-height:var(--navspace)}
		#copyright {padding:0 var(--navspace);font-size:.7em;}
		#copyright a{text-decoration:none;color:inherit;}
		#search {border-bottom:1px solid gray}
		#search input{border:none;background:none;}

#intro {xdisplay:none;}
	#intro, #intro>article {position:absolute;top:0;left:0;right:0;bottom:0;z-index:5}
	#intro>article{background:green;}

#warn{display:block;margin:1rem;padding:2rem 1rem;text-align:center;border:2px solid rgba(255,255,255,.8);background:rgba(255,255,255,.3);color:#fff}


body.isdebug:after{content:"css27.03.2020";text-align:center;position:fixed;left:0;right:0;bottom:50%;background:#fff;color:#f00;opacity:.4;z-index:1000}
#debug, body:after {display:none}

@media all and (display-mode: standalone) {
	body.isdebug:before{content:"is installed PWA";text-align:center;position:fixed;left:0;right:0;top:3rem;background:#fff;color:#f00;opacity:.4;z-index:1000}
}


.show_mobile{display:none}
.show_desktop{display:block}
@media only screen and (max-width:600px) {
	.show_mobile{display:block}
	.show_desktop{display:none}
}


#codeform {transition:all .1s;padding:1em 1em 1em}
#codeform>div {font-size:2em}
#codeform input {margin-bottom:.5em}
#codeform.error {background:red;color:white}
#codeform.warn {background:orange;color:white}
#codeform.okay {background:green;color:white}