/*03_grid.css*/

#header_left_div  	{ grid-area: header_left;}
#header_nav_div		{ grid-area: header_nav;}
header 				{ grid-area: header;}
#header_right_div  	{ grid-area: header_right;}

#layout_left_div  	{ grid-area: layout_left;}
#layout_div       	{ grid-area: layout;}
#layout_right_div 	{ grid-area: layout_right;}

nav#nav_nav 		{ grid-area: nav_nav;}

#main_wrapper 		{ grid-area: main_wrapper;}
#main_main 			{ grid-area: main_main;}
#main_footer 		{ grid-area: main_footer;}

#footer_left_div  	{ grid-area: footer_left;}
#footer_nav_div  	{ grid-area: footer_nav;}
#footer_footer 		{ grid-area: footer;}
#footer_right_div  	{ grid-area: footer_right;}


#footer_handy_div  { grid-area: footer_handy; }


#body_wrapper_div {
  margin: 0;
  min-height: 100dvh;
  display: grid;

  grid-template-columns:
    1fr
	var(--03_grid_nav_width)
    var(--03_grid_main_width)
    1fr;

  grid-template-rows:
    auto
    1fr
    auto;

  grid-template-areas:
    "header_left header_nav header header_right"
    "layout layout layout layout"
    "footer_left footer_nav footer footer_right";
}

#layout_div {
  margin: 0;
  display: grid;

  grid-template-columns:
    1fr
	var(--03_grid_nav_width)
    var(--03_grid_main_width)
    1fr;

  grid-template-rows:
    auto;

  grid-template-areas:

    "layout_left nav_nav main_wrapper layout_right"
}



#header_left_div, #header_nav_div, header, #header_right_div{
	height:var(--04_header_banner_height);
	position:sticky;
	top:0;
	z-index:1000;	
}

#banner_navigation_wrapper {
	grid-column: 2 / 4;
	grid-row: 1;

	display: grid;

	grid-template-columns:
		var(--03_grid_nav_width)
		var(--03_grid_main_width);

	grid-template-areas:
		"header_nav header";
}

@media (min-width: 769px) and (max-width: 1199px) {

	/* Gesamtes Tablet-Layout */
	#body_wrapper_div {
		width: 100%;
		min-width: 0;
		margin: 0;

		grid-template-columns:
			var(--03_grid_nav_width_1199)
			minmax(0, 1fr);

		grid-template-rows:
			auto
			1fr
			auto
			auto;

		grid-template-areas: none;
	}


	/* Header über Navigation und Hauptbereich */
	#banner_navigation_wrapper {
		grid-column: 1 / -1;
		grid-row: 1;

		width: 100%;
		min-width: 0;

		grid-template-columns:
			var(--03_grid_nav_width_1199)
			minmax(0, 1fr);

		grid-template-areas:
			"header header";
	}

	header {
		grid-column: 1 / -1;
		min-width: 0;
	}


	/* Navigation links, Haupttext rechts */
	#layout_div {
		grid-column: 1 / -1;
		grid-row: 2;

		width: 100%;
		min-width: 0;
		margin: 0;

		grid-template-columns:
			var(--03_grid_nav_width_1199)
			minmax(0, 1fr);

		grid-template-areas:
			"nav_nav main_wrapper";
	}

	nav#nav_nav,
	#main_wrapper,
	#main_main {
		min-width: 0;
	}


	#footer_footer {
		grid-column: 1 / -1;
		grid-row: 3;
	
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}



	/* Desktop-Randbereiche im Tablet ausblenden */
	#header_left_div,
	#header_right_div,
	#layout_left_div,
	#layout_right_div,
	#footer_left_div,
	#footer_right_div {
		display: none;
	}
}