body {
	font-family: 'Lato', sans-serif;
	font-weight:300;
}
#container {
	height:100vh;
	display:flex;
	flex-direction: column;
	color:#003250;
	--padding-lr:38px;
}
.scrollWrapper {
	flex:1;
	overflow:auto;
}
h1, h2 {
	margin-top:0;
	font-weight:900;
	color:#40657C;
}
h2 {
	font-size:28px;
	margin-bottom:.11em;
}
button {
	background:#009D7C;
	color:#fff;
	border:1px solid #009D7C;
	padding-top: .2em;
	padding-bottom: .2em;
}
button:hover {
	color:#fff;
	border:1px solid #009D7C;
}
button:focus {
	background:#009D7C;
	border:1px solid #000;
}
small {
	opacity:.6;
}
#head {
	display:flex;
	align-items: flex-end;
	justify-content: space-between;
	background-color:#07233A;
	background-image:linear-gradient(#003250,#0a1e32);
	color:#D9E0E5;
	padding:10px var(--padding-lr);
	box-shadow:0 0 10px rgba(0,0,0,.8);
	z-index: 1;
	flex: 0 0 auto;
}
	#head a {
		color:inherit;
	}
	#logo {
		flex:1 1 auto;
	}
	#logo > img {
		display:block;
		margin:auto;
		width:138px;
	}

#body {
	display:grid;
	grid-template-columns: 250px 1fr;
	grid-template-rows: auto 1fr;
	flex:1;
	z-index:0;
	min-height:0;
	height:100vh;
}
#body > * {
	position:relative;
	min-height:1px;
	display:flex;
}
	#box {
		grid-area:1 / 1;
		display:flex;
		align-items: center;
		background:#D9E0E5;
		font-size:.8em;
		padding:16px var(--padding-lr);
	}
	#nav {
		grid-area:2 / 1;
		background:#F2F5F6;
	}
	#tools {
		grid-area:1 / 2;
		background:#F2F5F6;
		padding:var(--padding-lr);
		padding:16px var(--padding-lr);
		flex-wrap:wrap;
	}
	#tools a {
		color:inherit;
		text-decoration:none;
	}
	#content {
		grid-area: 2 / 2;
		display:flex;
		flex:1;
		background:#D9E0E5;
		font-size:.9em;
	}
	#content > .scrollWrapper {
		padding:var(--padding-lr);
	}
	#content > .scrollWrapper > div {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(540px, 1fr) );
    	grid-gap: 20px;
	}
	#content > .scrollWrapper > div > * {
		max-height:calc(100vh - 262px);
	}

#foot {
	position:relative;
	background: #A6B7C2;
	padding:10px var(--padding-lr);
	text-align:right;
	font-size:12px;
}
@media (max-width: 1200px) {
	#container {
		--padding-lr: 16px;
	}
}
@media (max-width: 1000px) {
	#body {
		display:flex;
		flex-direction:column;
	}
	#box {
		display:none;
	}
	#breadcrumb h2 {
		display:none;
	}
	#container {
		xpadding-top:62px;
		height: auto;
		min-height:100vh;
	}
	#content:after {
		display:none;
	}
	#head {
		position:sticky;
		top:0;left:0;right:0;
		z-index:3;
	}
	#tools {
		order: 1;
		position:sticky;
		bottom:0;left:0;right:0;
		z-index:3;
	}
	body #tools:after {
		top:.5px;
		bottom:auto;
		left:0;
		right:0;
	}
	body #foot:after {
		left:0;
		right:0;
	}
	#nav {
		display:none;
	}
	#user {
		display:none;
	}
	body #project_nav ul ul {
		display:block;
	}
	#content > .scrollWrapper > div {
		grid-template-columns: repeat(auto-fill, minmax(60vw, 1fr) );
		grid-gap: 16px;
	}
}
@media (max-width: 600px) {
	#logo {
		display:none;
	}
	#breadcrumb {
		display:none;
	}
	#config {
		margin:auto;
	}
}


#breadcrumb > nav {
	font-size:12px;
}


/* date select ... */
#config {
	margin-left:auto;
	margin-bottom:-6px;
	align-self:flex-end;
	text-align:center;
}
#config button {
	background:none;
	border:none;
}
#config input {
	border:0;
	border-radius:3px;
}
#config .-m-cms-cont-ims1-date_select {
	display:none;
}


/* icons */
cd-i {
	display:inline-block;
	padding:3px;
	background:#1F3B50;
	white-space: nowrap;
	overflow:hidden;
	width:24px;
	height:24px;
	text-indent: 9999px;
	border-radius:2px;
	vertical-align:middle;
	margin:0 4px;
	margin-top: -.25em;
	background-position:center;
	background-repeat:no-repeat;
}
cd-i[i=menu]     { background-image:url(img/projects.svg) }
cd-i[i=settings] { background-image:url(img/settings.svg); }
cd-i[i=logout]   { background-image:url(img/logout.svg); }

/* nav */
#nav {
	padding:10px 0;
}
#nav a {
	display:block;
	padding:8px var(--padding-lr);
	color:inherit;
	margin-bottom:1px;
	background: calc(100% - 10px) 50% / 15px 12px no-repeat;
}
#nav a.cmsActive {
	font-weight: 900;
}
#nav a.cmsInside, #nav a:hover {
	background-color: #D9E0E5;
}
#nav li.cmsHasSub > a {
	background-image:url('img/down.svg');
}
#nav ul ul a {
	padding-left:60px;
}
#nav ul ul ul a {
	padding-left:80px;
}

/* project nav */
#project_nav > div {
	font-weight:bold;
	cursor:pointer;
}
#project_nav > nav a {
	display:block;
	padding:6px;
}
#project_nav > nav a.cmsInside {
	font-weight:900;
}
#project_nav > nav ul ul a {
	padding-left:18px;
}
#project_nav > nav ul ul ul a {
	padding-left:36px;
}
#project_nav > nav > ul {
	opacity:0;
	visibility: hidden;
	transition: all .3s;
	background:#F2F5F6;
	position:absolute;
	z-index:1;
	padding:16px;
	transform-origin:top left;
	transform:scale(.2);
	color:#40657C;
	border:1px solid;
	z-index:1;
	max-height:calc(100vh - 106px);
	overflow:auto;
	will-change:opacity;
}
#project_nav ul ul {
	display:none;
}
/*#project_nav:focus-within > nav > ul,*/
#project_nav.c1-focusIn > nav > ul { /* zzz, todo:oben */
	opacity:1;
	transform:scale(1);
	visibility: visible;
}
#project_nav > nav:after {
	content:'';
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:rgba(0,0,0,.2);
	pointer-events:none;
	opacity:0;
	transition:opacity .4s;
	will-change:opacity;
}
#project_nav.c1-focusIn > nav:after { /* zzz, todo focus-within */
	opacity:1;
}

/* c1 box */
#container .c1-box {
	border-radius:3px;
	overflow:hidden;
	box-shadow: 1px 4px 8px rgba(0,0,0,.4);
	background:#fff;
}
#container .c1-box > .-head,
#container .c1-box-head > * {
	background-color:#335B73;
	background-image: linear-gradient(#003250,#0a1e32);
	padding-top:7px;
	padding-bottom:6px;
	font-weight:bold;
	letter-spacing:.05em;
}
#container table.c1-style > tbody > tr {
	border:1px solid #fff;
	border-width:2px 0;
}

/* c1-style */
#container .c1-style > * > tr > * {
	padding:5px;
}
#container .c1-style > * > tr > :first-child { padding-left:10px; }
#container .c1-style > * > tr > :last-child { padding-right:10px; }




/* stupid partial border */
#body > *:after,
#foot:after {
	content:'';
	position:absolute;
	background:#003250;
	width:1px;
	height:1px;
	z-index:2;
}
#box:after {
	height:auto;
	top:10px;
	bottom:0;
	right:-1px;
	right:-.5px;
}
#nav:after {
	width:auto;
	left:10px;
	right:10px;
	top:-1px;
	top:-.5px;
}
#tools:after {
	width:auto;
	left:10px;
	right:10px;
	bottom:-1px;
	bottom:-.5px;
}
#content:after {
	height:auto;
	top:0;
	bottom:10px;
	left:-1px;
	left:-.5px;
}
#foot:after {
	width:auto;
	top:-1px;
	left:10px;
	right:10px;
}


/* fakable inputs */
input[type].c1-fakable {
    position:absolute;
    clip: rect(0 0 0 0);
}
input[type].c1-fakable + i {
	display:inline-block;
    width:18px;
    height:18px;
	background:#DADADA url(img/checked.svg) 50% 50% no-repeat;
	background-size:73%;
	border-radius:1px;
}
input[type=radio].c1-fakable + i {
	border-radius:50%;
}
input[type].c1-fakable:checked + i {
	background-color:#ACD084;
}
::placeholder {
	color:rgba(0, 50, 80, .7);
	font-size:.8em;
}

/* divers */
#user {
    letter-spacing:.05em;
}




/* neu */

.mobileContentNav {
	display:none;
}
@media (max-width: 700px) {
	body {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	#container .c1-box {
		border-radius:0;
		box-shadow:none;
	}
	#foot {
		display:none;
	}
	#config .-start-end {
		display:none;
	}
	#content > .scrollWrapper {
		display:flex;
		padding:0;
	}
	.scrollWrapper > div {
		flex:1;
		display:flex !important;
		flex-wrap:nowrap;
		overflow:hidden;
		scroll-behavior: smooth;



		/* snap */
		overflow:auto; /* ok? */
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overflow-x: scroll;


	}
	#content > .scrollWrapper > div > * {
		max-height:none;
		flex:0 0 100%;
		overflow:auto;
		scroll-snap-align: start; /* neede? yes chrome */
		scroll-snap-stop: always;
	}

	#content > .scrollWrapper > div > * > .-body {
		display:flex;
		flex-direction:column;
		xalign-items:center;
		justify-content: center;
		flex:1 0 auto;
	}


	.mobileContentNav:not([hidden]) {
		overflow:auto;
		display:block;
		border-top:1px solid #003250;
		color: #003250;
		flex:0 0 auto;
		background-color:#fff;
		z-index:1;
	}
	.mobileContentNav ul {
		display:flex;
		white-space:nowrap;
	}
	.mobileContentNav ul > li {
		flex:1 1 auto;
		text-align:center;
	}
	.mobileContentNav a {
		xborder-right:1px solid #003250;
		display:block;
		padding:1em 1em;
		color:inherit;

		position:relative;
	}
	.mobileContentNav a::after {
		content: '';
		position: absolute;
		background: #003250;
		width: 1px;
		z-index: 2;
		height: auto;
		top: 10px;
		bottom: 10px;
		right: -.5px;
	}
	.mobileContentNav li:last-child a::after {
		display:none;
	}

	.mobileContentNav a:active ,
	.mobileContentNav li.-Active > a {
		background:#F2F5F6;
	}

	/* hide date-select (tools) if not needed */
	#tools {
		transition:transform .2s;
		transition-property:transform, opacity;
	}
	html:not(.mobile_date_select_needed) #tools {
		xvisibility:hidden;
		transform:translateY(100%);
		pointer-events:none;
		opacity:0;
		xdisplay:none;
	}

}