@use './fonts';
@use './colors';
@use './responsive' as r;

$color-green-1: rgb(184,229,162);
$color-green-2: rgb(162,221,131);

$color-brown-header: rgb(0,62,41);
$color-darkgreen: rgb(1,67,39);
$color-midgreen: rgb(0,70,8);
$color-green: rgb(5,162,23);
$color-petrol: rgb(6,78,75);
$color-darkgray: rgb(0,40,39);

$major-radius: 15px;
$big-button-radius: 10px;
$button-radius: 5px;

//$width-very-narrow: 600px;
$width-narrow: 750px;
$width-normal: 1000px;
$width-wide: 1600px;

$indent-menu-left: 25px;

body {
	padding: 5px;
	margin: 0px auto;
	font-size: 12px;
	max-width: 1100px;
	min-height: 100.1vh;
	
	font-family: 'Noto Sans', sans-serif;
	
	@include r.narrow {
		padding: 20px;
	}
	
	@include r.normal {
		font-size: 15px;
	}
	
	@include r.wide {
		max-width: 70%;
	}
}

// #header {
	
// 	> div.image_row {
// 		display: flex;
// 		flex-direction: row;
		
// 		> div.siderow {
// 			flex: auto 1 1;
			
// 			display: flex;
// 			flex-direction: column;
			
// 			> div.spacer {
// 				flex: auto 1 1;
// 			}
// 			> div.border {
// 				flex: 100px 0 0;
// 				background-color: $color-brown-header;
// 			}
			
// 		}
		
// 		> div > a {
			
// 			display: flex;
			
// 			> img {
// 				height: 150px;
// 				width: 150px;
// 				margin: 0px 20px;
// 			}
			
// 		}
		
// 		@media screen and (min-width: $width-narrow) {
// 			> div > a > img {
// 				height: 250px;
// 				width: 250px;
// 			}
			
// 			> div.siderow > div.border {
// 				flex: 200px 0 0;
// 			}
// 		}
// 	}
	
// 	> div.title_row {
// 		margin: 20px 0px;
// 		padding: 20px 0px;
		
// 		border-top-color: $color-brown-header;
// 		border-top-width: 4px;
// 		border-top-style: solid;
		
// 		border-bottom-color: $color-brown-header;
// 		border-bottom-width: 4px;
// 		border-bottom-style: solid;
		
// 		font-size: 30px;
// 		font-weight: bold;
// 		color: $color-brown-header;
// 		text-align: center;
		
// 		@media screen and (min-width: $width-narrow) {
// 			font-size: 60px;
// 		}
		
// 		@media screen and (min-width: $width-normal) {
// 			font-size: 80px;
// 		}
		
// 		> a {
			
// 			color: inherit;
// 			text-decoration: none;
			
// 			display: flex;
// 			flex-direction: column;
			
// 			span.title {
// 				font-size: 60%;
// 			}
			
// 			span.name {
// 				line-height: 150%;
// 			}
// 		}
		
// 		> a:hover {
// 			font-weight: 900;
// 		}
// 	}
// }

// #topmenu {
// 	background-color: $color-green-1;
// 	border-radius: $major-radius;
	
// 	margin: 20px 0px;
	
// 	> ul.menu, > ul.mod-menu {
// 		display: flex;
// 		flex-direction: column;
// 		justify-content: space-between;
		
// 		min-height: 50px;
// 		padding: 20px;
		
// 		> li {
// 			flex: 17% 0 0;
			
// 			list-style: none;
			
// 			> a {
// 				height: calc(100% - 30px);
				
// 				background-color: $color-darkgreen;
// 				border-radius: $big-button-radius;
				
// 				padding: 15px 10px;
				
// 				display: flex;
// 				flex-direction: column;
// 				justify-content: center;
				
// 				color: white;
				
// 				font-weight: bold;
// 				text-align: center;
// 				text-decoration: none;
// 			}
			
// 			> a:hover {
// 				font-weight: 900;
// 			}
			
// 			margin: 12px 0px;
			
			
// 			@media (min-width: $width-narrow){
// 				font-size: 150%;
// 			}
			
// 			> .class-kita {
// 				background-color: $color-green;
// 			}
			
// 			> .class-eltern {
// 				background-color: $color-darkgreen;
// 			}
			
// 			> .class-konzept {
// 				background-color: $color-midgreen;
// 			}
			
// 			> .class-aktuelles {
// 				background-color: $color-petrol;
// 			}
			
// 			> .class-kontakt {
// 				background-color: $color-darkgray;
// 			}
// 		}
		
// 		@media screen and (min-width: $width-narrow) {
// 			min-height: 100px;
// 			flex-direction: row;
			
// 			> li {
// 				margin: 0px;
// 			}
// 		}
// 	}
// }

// #main_row {
	
// 	display: flex;
// 	flex-direction: column;
	
// 	margin-bottom: 20px;
	
// 	> div {
// 		border-radius: $major-radius;
// 	}
	
// 	> #left_column {
// 		flex: auto 0 0;
// 		margin-right: 0px;
// 		margin-bottom: 20px;
		
// 		background-color: $color-green-2;
		
// 		display: flex;
// 		flex-direction: column;
		
// 		padding: 20px;
		
// 		ul.nav, ul.nav-item, ul.nav-child, ul.mod-menu__sub {
			
// 			margin: 0px 0px 0px $indent-menu-left;
// 			padding: 0px 0px 0px 10px;
			
// 			> li {
// 				list-style: none;
				
// 				padding: 7px 0px 7px 7px;
				
// 				border-top-style: solid;
				
// 				> a {
// 					color: inherit;
// 					text-decoration: none;
// 					display: block;
// 					padding: 8px 0px;
// 				}
				
// 				> a:hover {
// 					font-weight: bold;
// 				}
				
// 				ul.nav-child, ul.mod-menu__sub {
// 					margin-top: 7px;
// 					padding: 0px;
// 				}
				
// 				display: none;
// 			}
			
			
// 			> li.active {
// 				display: list-item;
				
// 				li {
// 					display: list-item;
// 				}
// 			}
			
// 			> li:last-child {
// 				padding-bottom: 0px;
// 			}
			
// 		}
		
// 		> ul.nav, > ul.nav-item {
// 			margin-left: 0px;
			
// 			> li.active {
// 				border-bottom-style: solid;
// 			}
// 		}
		
// 		ul.nav-child, ul.mod-menu__sub {
// 			> li.parent {
// 				> a::after {
// 					content: " →";
// 				}
// 			}
// 		}
		
// 		div.traeger {
			
// 			div.header {
// 				border-radius: $button-radius;
// 				background-color: $color-darkgreen;
				
// 				margin: 20px 0px;
// 				padding: 10px;
// 				width: initial;
				
// 				color: white;
// 				font-weight: bold;
				
// 				@media screen and (min-width: $width-narrow) {
// 					margin-left: -15px;
// 					width: 70%;
// 				}
// 			}
// 		}
		
// 	}
	
// 	> #main {
// 		flex: auto 1 1;
		
// 		background-color: $color-green-1;
// 		padding: 20px;
// 		font-size: 15px;
		
// 		text-align: justify;
// 		hyphens: auto;
		
// 		div.blog > div.items-more > .nav {
			
// 			display: block;
// 			padding: 0px;
			
// 			> li {
// 				display: block;
				
// 				> a {
// 					padding: 4px;
// 					margin: 12px 0px;
// 					list-style-type: none;
// 					display: block;
// 				}
// 			}
// 		}
		
// 		@media screen and (min-width: $width-normal) {
// 			font-size: 20px;
			
// 			div.blog {
// 				> div.items-leading > div {
// 					// Settings for intro articles
// 					> div {
// 						p.readmore {}
// 					}
// 				}
				
// 				> div.items-leading > div,
// 				> div.items-row > div
// 				{
// 					p {
// 						margin-bottom: 0px;
// 					}
// 					p:first-child {
// 						margin-top: 0px;
// 					}
// 					p.readmore {
// 						font-size: smaller;
// 						text-align: right;
// 						margin-bottom: 20px;
// 					}
// 				}
				
// 				> div.items-row {
					
// 					display: flex;
					
// 					> div {
// 						// Settings for the two column articles
// 						margin-right: 20px;
// 						flex: 0px 1 0;
// 					}
					
// 					> div:last-child {
// 						margin-right: 0px;
// 					}
// 				}
// 			}
			
			
// 		}
		
// 		div.pagination {
			
// 			margin: 20px 0px;
// 			font-size: smaller;
			
// 			> ul {
// 				display: inline-block;
				
// 				padding: 0px;
// 				margin: 0px;
				
// 				> li {
// 					list-style: none;
// 					display: inline;
					
// 					margin: 7px 13px;
					
// 					.pagenav {
// 						padding: 8px 12px;
// 					}
// 				}
// 			}
			
// 			> p.counter {
// 				margin: 0px 5px;
// 				padding: 0px 0px 15px 0px;
				
// 				float: initial;
				
// 				@media screen and (min-width: $width-normal) {
// 					float: right;
// 					padding: 0px;
// 				}
// 			}
// 		}
		
// 		// Make tables responsive
// 		@media screen and (max-width: $width-narrow) {
// 			table {
// 				display: block;
				
// 				> tbody {
// 					display: block;
					
// 					> tr {
// 						display: block;
						
// 						border-bottom-style: solid;
// 						border-width: 1px;
						
// 						padding: 7px 0px;
						
// 						> td {
// 							display: block;
							
// 							text-align: left !important;
							
// 							> p{
// 								text-align: justify !important;
// 							}
// 						}
// 					}
					
// 					> tr:first-child {
// 						border-top-style: solid;
// 					}
// 				}
// 			}
// 		}
		
// 		// Enable left and right floating elements
// 		.pull-right {
// 			float: right;
// 		}
// 		.pull-left {
// 			float: left;
// 		}
		
// 		// Style links in blogs
// 		.blog {
// 			.page-header {
// 				> h2 {
// 					> a {
// 						display: block;
// 						margin-right: 10px;
// 						text-decoration: none;
// 						color: $color-darkgreen;
// 						font-weight: bold;
// 					}
					
// 					> a:hover {
// 						font-weight: 900;
// 					}
// 				}
// 			}
// 			.readmore {
// 				margin-top: 8px;
// 				> a {
// 					text-decoration: none;
// 					font-size: smaller;
// 					color: white;
// 					background-color: $color-darkgreen;
// 					padding: $button-radius;
// 					border-radius: $button-radius;
// 				}
				
// 				> a:hover {
// 					font-weight: bold;
// 				}
// 			}
// 			.items-more {
// 				a {
// 					text-decoration: none;
// 					font-weight: bold;
// 					color: $color-darkgreen;
// 				}
// 			}
// 			.pagination {
// 				ul {
// 					color: $color-darkgreen;
					
// 					> li,
// 					> .pagination-start,
// 					> .pagination-prev,
// 					> .pagination-next,
// 					> .pagination-end {
// 						span, a {
// 							font-weight: normal;
// 							font-size: inherit;
// 							color: inherit;
// 							text-decoration: none;
// 						}
// 						a {
// 							font-weight: bolder;
// 						}
						
// 						a:hover {
// 							font-weight: 900;
// 						}
// 					}
					
// 					> li > span {
// 						font-weight: 900;
// 						font-size: larger;
// 					}
					
// 				}
// 			}
// 		}
// 	}
	
// 	@media screen and (min-width: $width-narrow) {
// 		flex-direction: row;
		
// 		> #left_column {
// 			margin-right: 20px;
// 			margin-bottom: 0px;
// 			width: 300px;
// 		}
// 	}
// }

// #bottommenu {
// 	background-color: $color-green-1;
// 	border-radius: $major-radius;
	
// 	position: relative;
	
// 	padding: 20px;
// 	margin-bottom: 30px;
	
// 	> #impressum {
// 		> ul.nav {
// 			padding: 0px;
// 			margin: 0px;
			
// 			display: flex;
// 			flex-direction: column;
// 			z-index: 1;
			
// 			> li {
// 				list-style: none;
				
// 				display: block;
				
// 				margin: 12px 0px;
				
// 				> a {
// 					color: inherit;
// 					text-decoration: none;
					
// 					background-color: $color-darkgreen;
// 					border-radius: $big-button-radius;
// 					color: white;
// 					font-weight: bold;
					
// 					text-align: center;
// 					padding: 10px 20px;
					
// 					display: block;
// 				}
				
// 				> a:hover {
// 					font-weight: 900;
// 				}
// 			}
			
// 			@media (min-width: $width-narrow) {
// 				display: flex;
// 				justify-content: end;
// 				flex-direction: row;
				
// 				> li {
// 					margin: 0px 0px 0px 20px;
// 				}
// 			}
// 		}
// 	}
	
// 	> #copyright {
// 		font-size: 10px;
// 		text-align: center;
// 	}
// }