:root{
	--mobile-breakpoints : 320px; --tablets-breakpoints : 481px; --laptops-breakpoints : 769px; --desktops-breakpoints : 1025px; --tv-breakpoints : 1201px;
	
	--grid-template-rows: [nav-start] minmax(50px, auto) [header-start] minmax(100px, auto) [main-start] minmax(50vh, 1fr) [main-end] minmax(150px, auto) [page-end];/*NEW template-rows */  
	
	--pageBckgdColor: rgb(51, 51, 51);
	--asideBckgdColor: rgb(153, 153, 153);
	--basicWhite: #FFF;
	--basicFontColor: #333;
	
	--groundColor-100: rgba(255, 255, 255, 1);
	--groundColor-90: rgba(255, 255, 255, 0.9);
	--groundColor-75: rgba(255, 255, 255, 0.75);
	--groundColor-overlay: rgba(153, 153, 153, 0.9);
	--groundColor-asideOverlay: rgba(0, 0, 0, 0.25);
	
	--basicSvgColor: #333;
	--basicSvgSize: 2rem;
	
	--MaxWidthContainerSize: 1024px;
	--basic-padding : 1rem;
}
* {
  box-sizing: border-box;
}
body {
	margin:0;
	font-family: sans-serif;
	font-size : clamp( 0.57rem, -0.000769rem + 3.26vw, 1.1rem);
/* 	font-size : 1rem; */
}
body > section {
	display:none;
}
/*  ############ GRID main/side ############ */
.mainWidth {
	grid-column: col-start / span 12;
}
.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 */
}
/*  ############ LAYOUT MAIN ############ */
.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;
  background-color: var(--pageBckgdColor);
}
header, .main, #aside {
	background-color: var(--groundColor-90);
}
#nav {
	grid-row: nav-start / header-start ;/*NEW template-rows */
	color:var(--basicWhite);
}
.main-nav {
  list-style: none;
  display: flex;
}
#nav ul {
	margin: 0; 
}
.main-nav a, .main-nav li {
  padding: 0em 1em 0 0;
  display: block;
}
.main-nav li:last-child{
	padding: 0em 0em 0 0;
}
header {
	grid-row: header-start / main-start ;/*NEW template-rows */
}
.main{
grid-row: main-start / main-end;/*NEW template-rows */
}
footer {
grid-row: main-end / page-end ;/*NEW template-rows */
	color:var(--basicWhite);
}
#aside {
	z-index:-1;
	opacity:0;/* IMPORTANT animation */
	padding:0;
	background-color: var(--asideBckgdColor);
	border-right: 1px solid;
	hyphens: auto;
}
#overlay {
	display:none;
	grid-column: col-start / col-end;
	grid-row: nav-start / main-end;/*NEW template-rows */
	background-color: var(--groundColor-overlay);
	grid-template-rows: var(--grid-template-rows);/*NEW template-rows */
	grid-auto-flow: column;
}
.asideTabs_header, .overlay_header, #nav {
	padding: calc(var(--basicSvgSize) / 4 ) calc(var(--basicSvgSize) / 2 ) 0 calc(var(--basicSvgSize) / 4 ); /* align nav aside + main */
	}
/*  ############ aside LAYOUT ############ */
/*
#aside-label-nav {
	
	transition: all 0.9s ease;
	 @starting-style {
    opacity: 0;
    translate:  -80px 0;}
}
*/

.asideTabs_header {
	grid-column: 1fr;  /*1 / -1;*/
	grid-row: nav-start / header-start;/*NEW template-rows */
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
.asideTabs_header label {
	text-align: center;
	border-radius: 0.5em 0.5em 0 0;
	flex: 1 1 auto;
}
.asideTabs_container .asideTab {
	padding: calc( var(--basic-padding) * 0.55 + 1vw);
}
.asideTabs_container {
	grid-column:  1fr; /* 1 / -1; */
	grid-row: header-start / page-end ;/*NEW template-rows */
	background-color: var(--groundColor-90);
}
.asideTabs_container>div {
	display:none;
}
.form {
}
.map {
}
.search{
}
.close {
	flex: 0 2 auto;
	text-align: center;
	margin-left:15px;
}
.close svg {
	width:auto;
	height: calc(var(--basicSvgSize) * 0.75 + 0.3vw);
}
/*  ############ overlay LAYOUT ############ */
#overlay .titel {
	flex: 1 0 auto;
	text-align: center;
}
.overlay_header {
	grid-column: col-start / col-end;
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	background-color: var(--groundColor-75);
	
}
.overlay_header label {
}
.overlay_container {
	grid-column: col-start / col-end;
	background-color: var(--groundColor-90);
	}
/*  ############ Input check/radioBox :checked pseudo-class ############  */
#aside-checkbox:checked ~ .page #aside {
	opacity:1;
	z-index:1;
	transition: ease-in-out 0.2s;
	animation-name: slideInLeft;
	animation-duration: 0.7s;
	animation-iteration-count: 1;
}
#aside-checkbox:not(checked)  ~ .page #aside {
	transition: ease-in-out 1.0s;
	animation-name: slideOutLeft;
	animation-duration: 0.7s;
	animation-iteration-count: 1;
}
#aside-checkbox:checked ~  #asideOverlay {
	background-color: var(--groundColor-asideOverlay);
	height:100%;
	width:100%;
	position:fixed;
	top:0;
	left:0;
}
#overlay-checkbox:checked ~ .page #overlay {
	display: grid;
	transition: ease-in-out 1s;
}
#formTab:checked ~ .page  #aside .form, #mapTab:checked ~ .page  #aside .map, #searchTab:checked ~ .page  #aside .search {
	display:block;
}
#formTab:checked ~ .page #aside #formLabel, #mapTab:checked ~ .page #aside #mapLabel, #searchTab:checked ~ .page #aside #searchLabel {
	background-color: var(--groundColor-90);
}
/*  ############ 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) {
	#aside {
		z-index: 10;/* Over main overlay */
		opacity:1;/* IMPORTANT for animation */
	}
	#aside-label-nav, #aside .close {
		display: none;
	}
	#aside-checkbox:checked ~  #asideOverlay {
		display: none;
		}
	.mainWidth {
		grid-column: 4 / span 9;
	}
	.sideWidth {
		grid-column: col-start / span 3;
	}
}
/* ############ Meta CSS ########### */
.container {
  max-width: var(--MaxWidthContainerSize);
  margin: 0 auto;
  hyphens: auto;
}
.main>.container{
	min-height:70vh
}
.pushLeft {
  margin-left: auto;
}
/* ############ SVGs ########### */
svg {
  width:auto;
  height:calc(var(--basicSvgSize) + 0.5vw);/* calc(var(--basicSvgSize) + 0.5vw); */
  fill:var(--basicSvgColor);
}
#nav svg {
	fill:var(--basicWhite);
}
svg:hover{
	stroke: var(--basicFontColor);
	stroke-width: 10;
}
/* ############ my CSS snippets ############  */
.list_auto_placement dl {
  display: grid;
  gap:0;
  grid-auto-rows:  auto;
}
.list_auto_placement dt {
  grid-column: 1;
  font-weight: bold;
  text-align: right;
  
}
.list_auto_placement dt::after{
	content:' ~';
}
.list_auto_placement dd {
  grid-column: 2;
  
}