//@import url(reset.less);
@import url(lessmsp.less);
@import url(default.less); // transferriert
@import url(google-material-icons.less);
//@import url(formstone.less);

/* ------- Google Material Icons ------- */

	.material-icons {
		/*#less > .font-size(1.2);*/
		font-size: inherit;
	}

/* ------- Formstone ------- */

	.fs-checkbox-marker {
		margin-top: 7px;
	}
	.fs-checkbox-label {
		display: block;
		padding: 7px 0;
		font-weight: bold;
		#less > .font-size(1.6);
		line-height: 1;
		text-align: left;
	}

/* ------- END OF PRE-STUFF ------- */


/**{#less>.transition (all 300ms ease-out 0ms);*/

	.bold { font-weight: bold; }

html { overflow: hidden; }

body {
	display: block;
	width: 100%;
	min-height: 100%;
	min-height: 100vh;
	opacity: 1!important;
	font-family: @font;
	#less > .font-size(1);
	overflow: hidden;
	/*background-color: @cl-pri;*/
		background-color: @cl-acc-dark;

	#shell {
		display: block;
		width: 100%;

		#perimeter {
			display: block;
			width: 100%;
			padding: 0!important;
			overflow: hidden;
			/*#less > .noisy-bg(@cl-pri);*/
				#less > .noisy-bg(@cl-acc-dark);

			#frame {
				display: block;
				width: 100%;
				margin: 0 auto;
				min-width: 400px;
				max-width: 1920px;
				/* >>> DEV <<< */
					min-width: 900px;
					max-width: 1220px;
					max-width: 1440px;
					/*max-width: 1720px;*/
				#less > .box-shadow (0, 0, 10px, @cl-acc);

				#header, #content, #footer {
					display: block;
					width: 100%;
					height: auto;
					padding: 2%;
					overflow: none;
					#less > .font-size(1);
				}
				#header {
					//border-bottom: 6px solid @cl-pri-light;
					//#less > .noisy-bg(@cl-acc);

					h1 {
						display: inline-block;
						width: 70%;
						padding: 6px 3px;
						font-family: @font-handwriting;
						#less > .font-size(2.3);
						color: @cl-pri;

						.title-long {
							display: inline;
						}
						.title-short {
							display: none;
						}
					}
					
					nav {
						display: inline-block;
						width: 29%;
						/*padding: 6px 0 0;*/
						font-family: @font-handwriting;
						#less > .font-size(2.3);
						color: @cl-pri;
						text-align: right;

						ul {
							li {
								a#menu-handle {
									span {
																												display: inline-block;
										cursor: pointer;

										i {
											#less > .font-size(2.3);
											cursor: pointer;

											&#menu-icon-close {
												display: none;
												opacity: 0;
																												display: inline-block;
																												opacity: 1;
											}
										}
																												#less > .transition (all 150ms ease-out 0ms);
																												border-bottom: 2px dotted fade(@cl-pri,0%);
																												&:hover {
																													border-bottom-color: @cl-pri;
																												}
									}

									/*i.material-icons {
										#less > .transform-simple( rotate(0deg) );
										#less > .transition (all 150ms ease-out 0ms);
									}
									&:hover {
										i.material-icons {
											#less > .transform-simple( rotate(-90deg) );
										}
									}*/
								}
							}
						}
					}
				}
				#content {
					padding: 0;
					position: relative;
					overflow: hidden;
					background-position: center center;
					background-attachment: scroll;
					background-repeat: no-repeat;
					#less > .background-size(cover);

					#menu-main {
						display: none;
						display: block; /*position: absolute;*/
						top: 0;
						right: 0;
						padding: 15px 30px;
						background: @cl-pri-light;
						z-index: 777;
						#less > .box-shadow( -5px, 5px, 5px, @cl-acc );

						&.active {
							display: block;
							opacity: 1;
						}

						&>a {
							display: block;
							max-width: 500px;
							margin: 20px auto;
							padding: 8px 25px 8px;
							background: @cl-acc;
							border-bottom: 12px double @cl-pri-light;
							#less > .box-shadow( 0, -5px, 5px, @cl-acc-dark );
							#less > .transform-simple( scale(1) );
							#less > .transition (all 300ms ease-out 0ms);

							&>span {
								display: block;
								padding: 7px 0;

								&>i {
									display: block;
									font-weight: bold;
									font-family: @font-handwriting;
									#less > .font-size(1.3);
									color: @cl-pri;
									cursor: pointer;
								}
							}

							&:hover {
								#less > .transform-simple( scale(1.07) );
							}
						}
					}

					#pages-outer {
						display: block;
						width: 100%;
																		/* min-height: 700px; */
																			min-height: 90vh;
						padding: 3%;
						overflow: none;
						
						/* > temporär geringe Auflösung, dann evt je nach Device / Schnelligkeit HQ-Bild nachladen (in #content) [ ONLY FIRST TIME !!! ] < */
							/*background-image: url(../images/home_pre.jpg);*/
							/* >>> IMAGE ONLY ON BIG SCREENS (see @media below) */
								/*background-image: url(../images/home.jpg);*/
						transition: background 0.3s linear;
						background-position: center center;
						background-attachment: scroll;
						background-repeat: no-repeat;
						#less > .background-size(cover);

						#pages-inner {
							display: block;
							width: 100%;
							padding: 2%;
							/*opacity: 0.83;*/
							overflow: none;
							#less > .noisy-bg(@cl-pri);
							#less > .inner-shadow( 0, 0, 13px, 0, 0.7 );
							#less > .border-radius( 13px, 13px, 13px, 13px );

							&.navigate {
								padding-bottom: 150px;

								#navigate-area {
									display: block;
								}
							}

							#notify-bar {
								position: relative;
								width: 98%;
								margin: 1% auto 30px;
								padding: 15px 10px 10px;
								border: 2px dotted @cl-pri-alt;
								border-top: none;
								border-bottom: none;
								background: fade( @cl-pri-alt, 20% );
								#less > .border-radius( 10px, 10px, 10px, 10px );
								#less > .box-shadow( 0, 0, 7px, fade( @cl-pri-light, 70% ) );

								.material-icons {
									#less > .font-size(1.5);
									#less > .text-shadow( 0 0 5px @cl-pri-alt );

									&.mi-good {
										color: #AEEA00;
									}
									&.mi-warning {
										color: #FFD600;
									}
									&.mi-error {
										color: #F44336;
									}
									&.mi-close {
										position: absolute;
										top: 5px;
										right: 5px;
										/*background: @cl-pri-alt;*/
										color: @cl-acc;
										opacity: 0.16;
										z-index: 200;
										cursor: pointer;
										#less > .border-radius( 50%, 50%, 50%, 50% );
										#less > .transition (all 300ms ease-out 0ms);

										&:hover {
											opacity: 0.8;
										}
									}
								}

								&>span {
									display: none; /* JS set: table-row */
									opacity: 0;

									&>i {
										display: table-cell;
										width: 100%;
										padding: 5px 5px 10px;
										line-height: 1.2;

										&:first-child {
											width: auto;
											padding: 3px 10px 10px;
											vertical-align: top;
										}
									}
								}
							}
							#navigate-area {
								display: none;
								width: 100%;
								text-align: center;
								padding: 2%;

								position: absolute;
								bottom: 50px;
								right: 0;
								left: 0;
								z-index: 779;

								&.only-bw {
									&>span:last-child {
										display: none;
									}
								}
								&.only-fw {
									&>span:first-child {
										display: none;
									}
								}
							}

							.page {
								display: block;
								width: 100%;	
								padding: 1% 1% 3% 1%;
								position: relative;
								font-family: @font;
								#less > .font-size(1.2);
								line-height: 1.3;
								text-align: center;
								color: @cl-acc;
								overflow: none;

								/* single / simple declarations */

									p {
										display: block;
										margin: 5px 0;
										padding: 5px 0;
										text-align: center;
									}
									h2, h3, h4 {
										display: block;
										
										font-family: @font;
										font-weight: bold;
										text-align: left;
										color: @cl-acc;
										#less > .text-shadow( 1px 2px 3px rgba(0,0,0,.3) );
									}
									h2 {
										margin: 0 0 20px;
										padding: 20px;
										background: fade(@cl-pri-dark, 40%);
										border: 1px solid @cl-acc;
										#less > .font-size(2.2);
										#less > .box-shadow( -2px, -2px, 6px, @cl-acc );
										#less > .border-radius( 7px, 7px, 7px, 7px );
									}
									h3 {
										padding: 10px 10px 10px 0;
										#less > .font-size(2.0);
									}
									h4 {
										padding: 10px 10px 10px 0;
										#less > .font-size(1.5);
									}
									hr.hr-def {
										display:block;
										width: 90%;
										height: 2px;
										margin: 20px auto 20px;
										border: 0;
										background-color: rgba(3,22,52,0.8);
										background:linear-gradient(to right, fade(@cl-acc, 0%), fade(@cl-acc, 80%), fade(@cl-acc, 0%));
									}

								/* more complex */

									.coms-dropdown {
										display: block;
										width: 100%;
										position: relative;

										color: @cl-pri-alt;
										text-align: left;
										#less > .font-size(1.6);
										line-height: 1.5;
										border-bottom: 2px solid rgba(0,0,0,.2);
										/* optional, alternative layout & design */
											/*max-width: 600px;*/
											/*margin: 0 auto 20px;*/
											/*border: 5px solid @cl-pri-light;*/
											/*padding: 0 7px 2px;*/

										&, & span, & i, & ul, & li {
											cursor: pointer;
										}

										i.material-icons {
											width: 1em;
											#less > .font-size(1.4);
											color: @cl-pri-alt;
											opacity: 0;
											#less > .transition (opacity 300ms ease-out 0ms);

											&.coms-dd-i-close,
											&.coms-dd-i-done {
												display: none;
											}

											&.coms-dd-i-done {
												color: @cl-acc-dark;
											}

											&.coms-dd-i-open {
												opacity: 1;
											}

											&.coms-dd-i-open,
											&.coms-dd-i-close,
											&.coms-dd-i-done {
												margin-top: 10px;
												float: right;
											}
										}

										.coms-dd-sel {
											display: block;
											width: 100%;
											/* > only with border !! */
												/*width: 96%;*/
											margin: 0 auto;
											/*padding: 10px 25px 10px 0;*/
												padding: 0 25px 10px 0;
											font-weight: bold;
											border-top: 5px solid rgba(0,0,0,0);
											border-bottom: 5px solid fade(@cl-pri-light, 0%);
												border-bottom-color: @cl-pri-light;
											cursor: pointer;
										}

										.coms-dd-list {
											display: none;
											width: 96%;
											margin: 15px auto 15px;
											#less > .font-size(1.2);

											&>li {
												font-weight: bold;
												line-height: 1.8;
												#less > .transition (all 300ms ease-out 0ms);
												#less > .transform-simple( translateX(-1.1em) );
												
												i.material-icons {
													margin-right: 0.1em;
												}
													
												&:hover {
													#less > .transform-simple( translateX(0) );

													&>i {
														opacity: 1;
													}
												}
											}
										}

										&.coms-dd-selected {
											.coms-dd-sel {
												.coms-dd-title {
													color: @cl-acc-dark;
												}
												i.material-icons.coms-dd-i-open {
													display: none;
												}

												i.material-icons.coms-dd-i-done {
													display: inline-block;
													opacity: 1;
												}
											}
										}

										&.coms-dd-active {
											.coms-dd-sel {
												border-bottom-color: @cl-pri-light;

												i.material-icons.coms-dd-i-open,
												i.material-icons.coms-dd-i-done {
													display: none;
												}

												i.material-icons.coms-dd-i-close {
													display: inline-block;
													opacity: 1;
												}
											}

											.coms-dd-list {
												display: block;
											}
										}
									}

									.content-area {
										display: inline-block;
										width: 100%;
										margin: 20px 10px;
										padding: 10px;
										text-align: center;

										&.content-area-wide {
											text-align: left;
										}
									}
									.input-area {
										display: inline-block;
										width: 80%;
										/*margin: 25px 10px;
										padding: 20px 10px;*/
											margin: 15px 10px;
											padding: 10px;
										text-align: left;
										color: @cl-acc-alt;

										&.text-center {
											text-align: center;
										}

										&.inline-option {
											width: auto;
											margin: 15px 0;
											padding: 10px 20px 10px 0;
										}

										& label {
											display: block;
											width: 100%;
											margin-top: 40px;
											padding-bottom: 10px;
											font-weight: bold;
											#less > .font-size(1.1);
											color: @cl-pri-alt;
												/* color when selected only, JS not working yet :::; */ color: @cl-acc-dark;
												color: @cl-acc-alt;
											text-align: left;

											&:first-child {
												margin-top: 0;
											}

											&.oneline {
												margin: 3px 0;
												padding: 2px 0;
												font-weight: normal;
													margin: 5px 0 5px 6px;
													font-weight: bold;
													color: @cl-acc-dark;
													display: inline-block;
													width: auto;
											}

											&.active {
												color: @cl-acc-dark;
											}
										}

										&>input {
											display: block;
											width: 100%;
											padding-bottom: 10px;
											border: none;
											border-bottom: 4px solid @cl-pri-light;
											background: none;
											
											font-family: @font;
											font-weight: bold;
											#less > .font-size(1.6);
											color: @cl-acc-dark;
										}

										&>textarea {
											display: block;
											width: 100%;
											padding-bottom: 10px;
											border: none;
											background: none;
											border-bottom: 4px solid @cl-pri-light;
											outline: none;
											
											font-family: @font;
											font-weight: bold;
											#less > .font-size(1.6);
											color: @cl-acc-dark;
										}

										&>input::selection,
										&>textarea::selection {
											color: @cl-pri!important;
											background: @cl-acc-alt!important;
										}
										&>input::-moz-selection,
										&>textarea::-moz-selection {
											color: @cl-pri!important;
											background: @cl-acc-alt!important;
										}
										&>input::-webkit-selection,
										&>textarea::-webkit-selection {
											color: @cl-pri!important;
											background: @cl-acc-alt!important;
										}

										::-webkit-input-placeholder {
											color: @cl-pri-alt;
										}
										:-moz-placeholder {
											color: @cl-pri-alt;
										}
										::-moz-placeholder {
											color: @cl-pri-alt;
										}
										:-ms-input-placeholder {
											color: @cl-pri-alt;
										}
									}

									blockquote{
										display:inline-block;
										padding: 15px 20px 15px 60px;
										margin: 5px 0;
										position: relative;

										//font-family: @font-handwriting;
										#less > .font-size(1.5);
										color: @cl-acc-dark;
										line-height: 1.5;
										text-align: left;

										&::before{
											content: "\201C"; /*Unicode*/
											/*content: "\201D";*/

											font-family: Georgia, serif;
											font-size: 50px;
											font-weight: bold;
											color: #555;

											position: absolute;
											left: 18px;
											top:4px;
										}

										&::after{
											content: "";
										}
									}
							}
						}
					}
				}
				#footer {
					border-top: 6px solid @cl-pri-light;
					font-family: @font;
					#less > .font-size(1);
					color: @cl-pri;
					text-align: center;
					#less > .noisy-bg(@cl-acc);

					#less > .transform-simple( translateY(1px) ); /* BUG FIX / GoAround */

					span {
						margin: 0 10px;
					}
					/*a,a:link,a:visited,a:hover,a:active {
						margin: 0 2px;
						padding: 3px 1px;
						border-bottom: 1px dotted @cl-pri;
						border-top: 2px solid fade( @cl-pri, 0% );
						#less > .transition (all 300ms ease-out 0ms);
					}
					a:hover,a:active {
						background: fade(@cl-pri, 20%);
						border-bottom: 1px solid @cl-pri;
						border-top: 2px solid @cl-pri;
						#less > .box-shadow (0, 0, 5px, fade(@cl-pri, 60%));
					}*/
				}

			}
		}
	}
}

body.nojs {
	overflow-y: scroll;
}
body.nojs #frame {
	opacity: 1!important;
}
body.nojs .page {
	min-height: 400px!important;
	border-bottom: 3px solid @cl-pri-light;
	padding: 40px 1%;
}
body.nojs .page:last-child { border:none; padding-top: 1%; }


/* TEMP <select />-Styling (while JS not 100% working) */ select {
	border: none;
	box-shadow: none;
	background: transparent;
	background-image: none;
	-webkit-appearance: none;
	border: 3px solid @cl-pri-alt;
	border-radius: 3px;
	overflow: hidden;
	background: @cl-pri!important;/*#fafafa url("img/icon-select.png") no-repeat 90% 50%;*/
	padding: 10px 15px;
	font: @font;
	#less > .font-size(1.2);
	color: @cl-acc-dark;
}


#content.___OLDdefDecl /* BASE-DECLARATIONS */ {
	h3 {
		display: block;
		/*margin: 36px 0 20px;*/
		font-family: @font;
		font-weight: bold;
		#less > .font-size(1.6);
		color: @cl-text;
		#less > .text-shadow (1px 2px 3px rgba(0,0,0,.3));
	}
	h4 {
		display: block;
		/*margin: 28px 0 16px;*/
		font-family: @font;
		font-weight: bold;
		#less > .font-size(1.2);
		color: @cl-text;
	}
	h3.no-topm, h4.no-topm {
		margin-top: 0;
	}
	p {
		display: block;
		#less > .font-size(1.3);
		line-height: 1.3;
		margin: 4px 0 8px;
	}
	a,li {
		#less > .font-size(1.3);
		line-height: 1.3;
	}

	a,a:link,a:visited,a:hover,a:active {
		display: inline-block;
		color: @cl-acc;
		border-bottom: 2px dotted @cl-pri;
		margin: 1px 0;
		padding: 2px 1px 0;
		#less > .text-shadow (1px 2px 3px rgba(0,0,0,.3));
		#less > .transition (all 300ms ease-out 0ms);
	}
	a:hover,a:active {
		background: @cl-pri;
		border-bottom: 2px solid @cl-acc;
		#less > .box-shadow (0, 0, 5px, @cl-acc);
	}
	a.custom,a.custom:link,a.custom:visited,a.custom:hover,a.custom:active {
		background: none;
		border-bottom: none;
		margin: 0;
		padding: 0;
		text-shadow: none;
		box-shadow: none;
		transition: none;
		cursor: default;
	}
}

/*option:disabled {
	display: none!important;
}*/

@media (max-width: 899px) {
	#frame {
		min-width: 400px!important;
	}
	#header {
		padding: 5%!important;

		h1, &>nav {
			width: 75%!important;
		}
		h1 {
			&>.title-long {
				display: none!important;
			}
			&>.title-short {
				display: inline!important;
			}
		}
		#menu-handle {
			&>span {
				border-bottom-color: @cl-pri!important;
			}
		}
	}
	#pages-outer {
		padding: 3% 0%!important;
	}
	#pages-inner {
		padding: 5% 3%!important;
		#less > .border-radius( 0px, 0px, 0px, 0px ) !important;
		#less > .inner-shadow( 0, 3px, 7px, 0, 0.7 ) !important;
	}
	.input-area {
		width: 95%!important;
	}
	#footer {
		padding: 5%!important;
	}
}
@media (min-width: 400px) {
	#minscreen {
		display: none!important;
	}
}
@media (min-width: 900px) {
	#pages-outer {
		background-image: url(../images/home.jpg);
	}
}

span.ml-text-de {
	font-style: italic;
}

.Buttons-buttonWide i,
.Buttons-buttonWide span.ml-text-sk,
.Buttons-buttonWide span.ml-text-de,
a span.ml-text-sk,
a span.ml-text-de {
	cursor: pointer;
}

span.input-area input[type=date],
span.input-area input[type=datetime-local] {
	max-width: fit-content;
}