/*
Theme Name: 	Zeitraumdesign
Theme URI: 		http://mohnrot.ch
Version: 		1.03
Author: 		mohnrot
Author URI: 	http://mohnrot.ch
*/



/*** Sensible Defaults ***/

@import "css/reset.css";
@import "js/lightbox/css/lightbox.min.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
/*::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; } */

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	        font-smoothing: antialiased;
}

html, body {
	font-family: "din-2014",sans-serif;
	font-size: 14px;
	line-height: 130%;
	color: #512400;
}

.wf-loading {
	visibility: hidden;
	opacity: 0;
}

.wf-active, .wf-inactive {
	visibility: visible;
	opacity: 1;
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
		 -o-transition: all 0.2s ease-in-out;
		    transition: all 0.2s ease-in-out;
}



.clear { clear: both; }
strong { font-weight: bold; }
em { font-style: italic; }
a, a:link, a:visited, a:hover, a:focus { color: inherit; }

.page-wrap {
	min-height: 100vh;
	width: 100%;
	max-width: 1500px;
	background: #E8E7DB;
	margin: 0 auto;
	padding-bottom: 150px;
	position: relative;
}

	.page-wrap footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

.wrap {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}

.content-wrap {
	width: 100%;
	max-width: 1010px;
	margin: 0 auto;
	padding: 0 15px;
}

header {
	background: #fff;
	height: 65px;
}

	@media (min-width: 600px) {
		header {
			height: 80px;
		}
	}

	@media (min-width: 800px) {
		header {
			height: 115px;
		}
	}

	header .content-wrap {
		height: 100%;
		position: relative;
	}

	header .nav-toggle {
		width: 40px;
		height: 40px;
		position: absolute;
		bottom: 0;
		left: 0;
		padding-top: 10px;
		cursor: pointer;
		display: block;
	}

		header .nav-toggle span {
			background: #3F220A;
			width: 22px;
			height: 2px;
			margin: 3px 0 3px 15px;
			display: block;
		}

		@media (min-width: 800px) {
			header .nav-toggle {
				display: none;
			}
		}

	header a.logo {
		width: 155px;
		height: 41px;
		background: url(css/img/logo-zeitraumdesign.svg) no-repeat right bottom;
		background-size: contain;
		display: block;
		text-indent: -1000px;
		overflow: hidden;
		position: absolute;
		right: 15px;
		bottom: 10px;
	}

		@media (min-width: 600px) {
			header a.logo {
				width: 181px;
				height: 50px;
				bottom: 8px;
			}
		}

		@media (min-width: 800px) {
			header a.logo {
				width: 241px;
				height: 69px;
				bottom: 2rem;
			}
		}

	@media (max-width: 799px) {
		header nav {
			display: none;
			background: rgba(82, 37, 0, 0.7);
			position: absolute;
			top: 80px;
			left: 0;
			width: 100%;
			min-height: 33vw;
			z-index: 9;
			color: #fff;
			padding: 15px;
			text-transform: uppercase;
			font-size: 1.1rem;
			font-weight: 700;
			line-height: 135%;
		}

			header nav ul li {

			}

				header nav ul li ul {
					display: none;
					position: relative;
					padding: 0.25rem 0;
				}

					header nav ul li ul::before {
						content: "";
						width: 0;
						height: 0;
						border-left: 0.5rem solid transparent;
						border-right: 0.5rem solid transparent;
						border-top: 0.5rem solid #fff;
						position: absolute;
						left: 0;
						top: 0.65rem;
					}

				header nav ul li a {
					text-decoration: none;
				}

				header nav ul li.open ul,
				header nav ul li.current-menu-item ul,
				header nav ul li.current-page-ancestor ul {
					display: block;
					padding-left: 1.5rem;
					font-weight: normal;
				}

			header nav.visible {
				display: block;
			}
	}

	@media (max-width: 599px) {
		header nav {
			top: 65px
		}
	}

	@media (min-width: 800px) {
		header nav {
			font-weight: bold;
			font-size: 1.07rem;
			line-height: 130%;
			position: absolute;
			bottom: 0.5rem;
			z-index: 99;
		}

			header nav ul {
				display: flex;
				flex-flow: row wrap;
				text-transform: uppercase;
			}

				header nav ul li {
					margin-right: 2.25rem;
					position: relative;
					-webkit-transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;
				}

					header nav ul li a {
						position: relative;
						z-index: 1;
					}

					header nav ul li.menu-item-has-children::before {
						content: "";
						width: 0;
						height: 0;
						border-left: 0.75rem solid transparent;
						border-right: 0.75rem solid transparent;
						border-top: 0.75rem solid #fff;
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 0;
						z-index: 0;
						-webkit-transition: all 0.2s ease-in-out;
						-moz-transition: all 0.2s ease-in-out;
						-o-transition: all 0.2s ease-in-out;
						transition: all 0.2s ease-in-out;
					}

						header nav ul li.menu-item-has-children:hover::before {
							bottom: -1.1rem;
							opacity: 1;
						}

					header nav ul li:hover,
					header nav ul li.current-menu-item,
					header nav ul li.current-page-ancestor {
						color: #805725;
					}

					header nav ul li ul {
						display: none;
						text-transform: uppercase;
						min-width: 500px;
					}


						header nav ul li:hover ul {
							display: block;
							position: absolute;
							padding: 2.5rem 0;
						}

							header nav ul li:hover ul li {
								font-size: 2.1rem;
								font-weight: normal;
								color: #fff;
								line-height: 130%;
							}


				header nav ul li a {
					text-decoration: none;
				}
	}

.main {
	background: #E8E7DB;
	padding: 20px 0;
}

	@media (min-width: 800px) {
		.main {
			padding: 2.5rem 0;
		}
	}

	.main h1,
	.main h2 {
		color: #869E36;
		font-weight: 500;
		font-size: 1.7rem;
		line-height: 110%;
		margin: 1em 0 0.5em 0;
	}

	.main h1:nth-of-type(1),
	.main h2:nth-of-type(1) {
		margin-top: 0;
	}

	.main h3 {
		color: #869E36;
		font-weight: 500;
		font-size: 1.4rem;
		line-height: 110%;
		margin: 1em 0 0.5em 0;
	}

	.main h4 {
		color: #805725;
		font-weight: 700;
		font-size: 1.2rem;
		line-height: 110%;
		margin: 1em 0 0.5em 0;
	}

	.main a {
		text-decoration: underline;
	}

	.main p {
		margin-bottom: 1.2em;
	}

.flex-content {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.flex-content .column {
	width: 100%;
	margin-bottom: 2rem;
}

	@media (min-width: 800px) {
		.flex-content .column {
			width: 33.33%;
			width: calc(33.33% - 3rem);
			margin-bottom: 0;
		}

	}

footer {
	background: url(css/img/footer.jpg) no-repeat center center;
	background-size: cover;
	padding: 20px 0;
	color: #7C7957;
	font-size: 0.9rem;
}

	@media (min-width: 800px) {
		footer {
			padding: 2.5rem 0;
		}
	}

	.footer-areas {
		display: none;
		flex-flow: row wrap;
	}

	.footer-areas-mobile {
		display: flex;
		flex-flow: row wrap;
	}

		@media (min-width: 700px) {
			.footer-areas {
				display: flex;
			}
			.footer-areas-mobile {
				display: none;
			}
		}

	.footer-area {
		width: 20%;
		padding-right: 1rem;
		line-height: 120%;
	}

	.footer-areas-mobile .footer-area {
		width: 33.3%;
		margin-bottom: 2rem;
		font-size: 10px;
		line-height: 120%;
	}

		.footer-areas-mobile .footer-area:nth-of-type(2) {
			width: 66.6%;
		}

	.footer-area.empty { display: none; }

	@media (min-width: 900px) {
		.footer-area {
			width: 16.6%;
		}
		.footer-area.empty { display: block; }
	}

.hero {
	background: #eee;
	height: 33vw;
	min-height: 170px;
	position: relative;
}


	.hero .hero-cover {
		background: rgba(82, 37, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: all 0.15s ease-in-out;
		-moz-transition: all 0.15s ease-in-out;
		-o-transition: all 0.15s ease-in-out;
		transition: all 0.15s ease-in-out;
	}

		@media (min-width: 800px) {
			.hero .hero-cover.visible {
				opacity: 1;
				pointer-events: all;
			}
		}

	.hero .slides {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.hero .slide {
		height: 100%;
		width: 100%;
		position: absolute;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		opacity: 0;
		-webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
		-o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
	}

		.hero .slide:nth-child(1) {
			opacity: 1;
		}

		.hero .slide .slide-text {
			/* background: rgba(141, 94, 37, 0.7); */
			background: rgba(255,255,255,0.2);
			backdrop-filter: blur(0.4em);
			padding: 10px 15px;
			font-size: 1rem;
			line-height: 120%;
			font-weight: 500;
			color: #fff;
			position: absolute;
			width: 100%;
			bottom: 0;
			right: 0;
			padding-right: 45px
		}

			@media (min-width: 600px) {
				.hero .slide .slide-text {
					background: rgba(255,255,255,0.2);
					backdrop-filter: blur(0.4em);
					border: none;
					/* border: 1px solid rgba(255, 255, 255, 0.7); */
					width: 215px;
					bottom: 3.5rem;
					right: 8rem;
					padding: 1rem;
					font-size: 1.1rem;
					line-height: 135%;
					/* text-shadow: 0 1px 10px #000 */
				}
			}

			@media (min-width: 800px) {
				.hero .slide .slide-text {
					padding: 2.35rem;
					font-size: 1.625rem;
					line-height: 135%;
					width: 350px;
					bottom: 6rem;
					right: 12rem;
				}
			}

			.hero .slide .slide-text .arrow-next {
				position: absolute;
				width: 20px;
				height: 15px;
				background: url(css/img/pfeil.png) no-repeat center center;
				background-size: contain;
				cursor: pointer;
				right: 15px;
				top: 50%;
				transform: translateY(-50%);
				display: none;
			}
				@media (min-width: 600px) {
					.hero .slide .slide-text .arrow-next {
						width: 2rem;
						height: 1.57rem;
						right: 0;
						transform: translateX(150%) translateY(-50%);
					}
				}

				@media (min-width: 800px) {
					.hero .slide .slide-text .arrow-next {
						width: 3rem;
						height: 2.57rem;
					}
				}


		.hero .slide .content-wrap {
			width: 100%;
			height: 100%;
		}

h4.references-headline {
	margin-top: 3rem;
	margin-bottom: 1rem;
}

.references {
	display: flex;
	flex-flow: row wrap;
}

	.references .reference-item {
		width: 100%;
		position: relative;
		display: block;
		cursor: pointer;
		margin-bottom: 10px;
	}

		@media (min-width: 500px) {
			.references .reference-item {
				width: 33.33%;
				width: calc(33.33% - 14px);
				margin-right: 21px;
				margin-bottom: 21px;
			}
		}

		@media (min-width: 800px) {
			.references .reference-item {
				width: 33.33%;
				width: calc(33.33% - 1.7rem);
				margin-right: 2.55rem;
				margin-bottom: 2.55rem;
			}
		}

		.references .reference-item:nth-of-type(3n) {
			margin-right: 0;
		}

		.references .reference-item::after {
			content: "";
			display: block;
			padding-top: 100%;
		}

		.reference-link {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
		}

		.reference-link-hidden {
			position: absolute;
			width: 0;
			height: 0;
			opacity: 0;
		}

	.references .reference-item .reference-cover {
		background: rgba(82, 37, 0, 0.7);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.references .reference-item:hover .reference-cover {
			opacity: 1
		}



.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='submit'],
.wpcf7 textarea {
	-webkit-appearance: none;
	outline: none;
	background: #DDDDC4;
	color: #333;
	border: none;
	font: inherit;
	padding: 0.7rem 1rem;
	width: 100%;
	max-width: 450px;
	margin-bottom: 6px;
	border-bottom: 1px solid #DDDDC4;
	border-top: 1px solid #DDDDC4;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.wpcf7 textarea {
	height: 5rem;
}

.wpcf7 input[type='submit'] {
	background: #8CA735;
	color: #fff;
	font-weight: 500;
	width: auto;
	padding: 0.7rem 2rem;
}

.wpcf7-form p {
	margin-bottom: 0;
}

.wpcf7 input[type='text']:focus,
.wpcf7 input[type='email']:focus,
.wpcf7 textarea:focus {
	border-bottom: 1px solid #7c9330
}

.wpcf7 input[type='text']::placeholder,
.wpcf7 input[type='email']::placeholder,
.wpcf7 textarea::placeholder {
	color: #7c9330;
}


.lightbox span.lb-number {
	display: none !important
}

.main ul {
    padding-left: 1em !important;
}

	.main ul li {
	    position: relative;
	}

		.main ul li::before {
			content: "";
			display: block;
			position: absolute;
			width: 0.7em;
			height: 0.7em;
			top: 0.3em;
			left: -1.2em;
			background: url(zpunkt.png) no-repeat center;
			background-size: contain;
		}