/* --------------------------------------------------------------

    (flex +) grid.css


-------------------------------------------------------------- */
header {
	grid-row: header-start / main-start ;/*NEW template-rows */
}
.page {
  display: grid;
  width:100vw;
  grid-template-columns: [col-start] repeat(12,  1fr) [col-end];
  grid-template-rows: var(--grid-template-rows);/*NEW template-rows */
  gap: 0px;
}
@supports (display: grid) {
  #aside {
	position: relative;
	width: auto;
	height:auto;
	}
}

.mainWidth {
	grid-column: col-start / span 12;
}
.main-nav a, .main-nav li {
	display: block;
}
.sideWidth {
	grid-column: col-start / span 12; /* default mobile/smartphone*/
	grid-row: nav-start / page-end;/*NEW template-rows */
	display:grid;
	grid-template-rows: var(--grid-template-rows);/*NEW template-rows */
}
#nav {
	grid-row: nav-start / header-start ;/*NEW template-rows */
}
.main-nav {
  	display: flex;
}
.main{
	grid-row: main-start / main-end;/*NEW template-rows */
}
footer {
	grid-row: main-end / page-end ;/*NEW template-rows */
}
.asideTabs_header {
	grid-column: 1fr;  /*1 / -1;*/
	grid-row: nav-start / header-start;/*NEW template-rows */
}
@supports (display: grid) {
	.asideTabs_header {
			display:flex;
			flex-flow: row nowrap;
			justify-content: space-between;
		}
	}
.asideTabs_header label {
	flex: 1 1 auto;
}
.asideTabs_container {
	grid-column:  1fr; /* 1 / -1; */
	grid-row: header-start / page-end ;/*NEW template-rows */
}
.close {
	flex: 0 2 auto;
}
#overlay {
	display:none;
	/* grid-column: col-start / col-end; */
	grid-row: header-start / main-end;/*NEW template-rows */
/* 	grid-template-columns: subgrid; */
	grid-template-rows: var(--grid-template-rows);/*NEW template-rows */
	grid-auto-flow: column;
}
@supports (display: grid) {
	#overlay {
		position: relative;
		}
	}
#overlay .titel {
	flex: 1 0 auto;
}
.overlay_header {
	/* grid-column: col-start / col-end; */
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
.overlay_container {
	/* grid-column: col-start / col-end; */
	}
/* CheckBox
------------------------------------------ */
/* #aside-checkbox:checked ~ .page #aside  cf layout.css */
#overlay-checkbox:checked ~ .page #overlay {
	display: grid;
}
/* MediaQueries
------------------------------------------ */
@media screen and (min-width: 481px) {
	.sideWidth {
	grid-column: col-start / span 8;
	}
}
@media screen and (min-width: 769px) {
	.sideWidth {
	grid-column: col-start / span 5;
	}
}
@media screen and (min-width: 1201px) {
	.mainWidth, #overlay {
		grid-column: 4 / span 9;
	}
	.sideWidth {
		grid-column: col-start / span 3;
	}
}