body			{
			background-color:var(--C000000);
			color:var(--Cffffff);
			margin:0;
			padding:0;
			--progress:100%;
			}

#err			{
			position:fixed;
			top:0;
			right:0;
			font-size:8px;
			overflow:hidden;
			background-color:red;
			color:var(--Cffffff);
			opacity:30%;
			white-space:pre;
			z-index:1;
			}
#err:hover		{
			opacity:1;
			font-size:14px;
			}

*			{ box-sizing:border-box }

a			{ color:var(--Caaaaff); text-decoration:none }
a:visited		{ color:var(--C55ffff) }
a:hover			{ color:var(--Cffff00); text-decoration:underline }
a:active 		{ color:var(--Cff8800) }

@media (min-width:601px) {

.l1:before		{
			flex-grow:1;
			content:"";
			display:block;
			height:24px;
			}
.l1			{
			display:flex;
			flex-direction:column;
			min-height:100vh;
			position:relative;
			}
.l1:after		{
			flex-grow:1;
			content:"";
			display:block;
			height:24px;
			}

.l2			{
			width:450px;
			min-height:400px;
			border: 1px solid red;
			border-radius:8px;
			display:block;
			flex-shrink:0;
			margin:0 auto;	/* das macht es mittig	*/
			}
.lbar			{
			overflow:hidden;
			left:0;
			top:0;
			height:10px;
			width:100%;
			box-sizing:inherit;
			padding:0 1px;
			}
.lbar div		{
			position:relative;
			height:8px;
			width:var(--progress);
			background-color:green;
			border:1px solid yellow;
			border-radius:8px;
			}
}