/*
Theme Name: JD Fachplanung
Author: URBAN PROPAGANDA Communications GmbH
Author URI: https://urban-propaganda.de/
Description: Custom responsive theme.
Version: 1.0.3
Tags: php8, wp7
Text Domain: jdfachplanung
*/

@charset "UTF-8";

:root {
	--text-color: #fff;
	--text-dimmed-color: #bbb;
	--text-hover-color: #00879a;
	--text-primary-color: #00879a;
	--text-secondary-color: #004a77;
	--background-color: #070f1c;
	--box-background-color: #05232f;
	--border-radius: 40px;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/wp-content/themes/jd-fachplanung/fonts/montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html, body {
    height: 100%;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
}

body, button, input, select, textarea {
    font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	line-height: 30px;
	font-weight: 300;
	color: var(--text-color);
}

table {
	border-collapse: collapse;
    padding: 0; 
    margin: 0;
}

textarea {
	resize: vertical;
}

* {
	box-sizing: border-box;
	outline: none;
	margin: 0;
	padding: 0;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
}

b, strong {
	font-weight: 700;
}

h1, .h1, h2, h3, h4, h5 {
	color: var(--text-color);
	text-transform: uppercase;
}
h1, .h1, h2, h3, h4, h5, p {
	margin-bottom: 30px;
}
h1, .h1 {
	font-size: 54px;
	line-height: 62px;
	font-weight: 700;
}
h2 {
	font-size: 42px;
	line-height: 50px;
	font-weight: 700;
}
h3 {
	font-size: 30px;
	line-height: 38px;
	font-weight: 700;
}
h4 {
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
}
h5 {
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
}

a {
	color: var(--text-color);
	font-weight: 400;
	text-decoration: none;
}
a:hover {
	color: var(--text-hover-color);
	font-weight: 400;
	text-decoration: none;
}

.imgresponsive {
	display: block;
	width: 100%;
	height: auto;
}

.roundedcorners {
	overflow: hidden;
	border-radius: var(--border-radius);
	display: block;
	width: 100%;
	height: auto;
}

#bg {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 16;
}
body.mobile-menu-active #bg {
	opacity: 1;
	pointer-events: auto;
}

#main {
	min-height: 50vh;
}


/* Content */
.c-content {
	width: 100%;
	/* max-width: 1920px; */
	margin: 0 auto;
}
.c-content-center {
	width: 100%;
	max-width: 1560px;
	margin: 0 auto;
}
.c-content-inner {
	padding: 0 80px;
}
.c-content-narrow {
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
}
/* /Content */


/* Spacers */
.c-spacer {
	height: 60px;
}
.c-spacer-halfhalf,
.c-spacer-small {
	height: 15px;
}
.c-spacer-half {
	height: 30px;
}
.c-spacer-double {
	height: 120px;
}
.c-spacer-section {
	height: 180px;
}
.c-spacer-header {
	height: 184px;
}
/* /Spacers */


/* Formatting */
.textcenter {
	text-align: center;
}
.textright {
	text-align: right;
}
.textleft {
	text-align: left;
}
.textsmall {
	color: #000;
	font-size: 14px;
	line-height: 20px;
}
.textbody {
	font-size: 24px;
	line-height: 32px;
}
.textlarge {
	font-size: 72px;
	line-height: 80px;
	font-weight: 700;
}
.textupper {
	text-transform: uppercase;
}
.textbold {
	font-weight: 700;
}
.textcolor {
	color: var(--text-color);
}
.textprimary,
.textprimary h1,
.textprimary h2,
.textprimary h3 {
	color: var(--text-primary-color);
}
.textsecondary,
.textsecondary h1,
.textsecondary h2,
.textsecondary h3 {
	color: var(--text-secondary-color);
}
.textlight {
	color: #fff;
}
.textgray {
	color: #888;
}
.textdimmed {
	color: var(--text-dimmed-color);
}
.textitalic {
	font-style: italic;
}
.textdark {
	color: #000;
}
.textnodecoration {
	text-decoration: none;
}
.textnowrap {
	white-space: nowrap;
}
/* /Formatting */


/* Grid */
.c-grid {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-column-gap: 60px;
	grid-row-gap: 60px;
}
.c-grid-6-6 {
	grid-template-columns: repeat(2, 1fr);
}
.c-grid-4-4-4 {
	grid-template-columns: repeat(3, 1fr);
}
.c-grid-3-3-3-3 {
	grid-template-columns: repeat(4, 1fr);
}
.c-grid-4-1-7 {
	grid-template-columns: 4fr 1fr 7fr;
}
.c-grid-4-2-3-3 {
	grid-template-columns: 4fr 2fr 3fr 3fr;
}
.c-grid-4-3-2-3 {
	grid-template-columns: 4fr 3fr 2fr 3fr;
}
.c-grid-4-3-3-2 {
	grid-template-columns: 4fr 3fr 3fr 2fr;
}
.c-grid-5-2-2-3 {
	grid-template-columns: 5fr 2fr 2fr 3fr;
}
.c-grid-3-3-6 {
	grid-template-columns: 3fr 3fr 6fr;
}
.c-grid-3-6-3 {
	grid-template-columns: 3fr 6fr 3fr;
}
.c-grid-6-3-3 {
	grid-template-columns: 6fr 3fr 3fr;
}
.c-grid-8-4 {
	grid-template-columns: 8fr 4fr;
}
.c-grid-4-8 {
	grid-template-columns: 4fr 8fr;
}
.c-grid-7-5 {
	grid-template-columns: 7fr 5fr;
}
.c-grid-5-7 {
	grid-template-columns: 5fr 7fr;
}
.c-grid-9-3 {
	grid-template-columns: 9fr 3fr;
}
.c-grid-3-9 {
	grid-template-columns: 3fr 9fr;
}
.c-grid-gap {
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}
.c-grid-nogap {
	grid-column-gap: 0 !important;
	grid-row-gap: 0 !important;
}
.c-col-center {
	place-self: center;
	width: 100%;
}
.c-col-bottom {
	place-self: end;
	width: 100%;
}
/* /Grid */


/* Columns */
.c-row {
	display: block;
	margin: 0 -40px -40px 0;
}
.c-row::after {
	content: "";
	display: table;
	clear: both;
}
.c-clear {
	display: block;
	clear: both;
	width: 100%;
	border: 1px solid transparent;
	height: 1px;
}
.c-col-1, .c-col-2, .c-col-3, .c-col-4, .c-col-5, .c-col-6,
.c-col-7, .c-col-8, .c-col-9, .c-col-10, .c-col-11, .c-col-12 {
	float: left;
	padding: 0 40px 40px 0;
	margin: 0;
}
.c-col-1 { width: 8.33%; }
.c-col-2 { width: 16.66%; }
.c-col-3 { width: 25%; }
.c-col-4 { width: 33.33%; }
.c-col-5 { width: 41.66%; }
.c-col-6 { width: 50%; }
.c-col-7 { width: 58.33%; }
.c-col-8 { width: 66.66%; }
.c-col-9 { width: 75%; }
.c-col-10 { width: 83.33%; }
.c-col-11 { width: 91.66%; }
.c-col-12 { width: 100%; }
/* /Columns */


/* Button */
.urban-button {
	display: inline-block;
	height: 48px;
	border-radius: 8px;
	line-height: 46px;
	padding: 0 30px 0 30px;
	background-color: transparent;
	border: 2px solid var(--text-primary-color);
	color: var(--text-primary-color) !important;
	font-weight: 700;
	font-size: 18px;
	white-space: nowrap;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.2s;
	text-align: center;
	letter-spacing: 1px;
	cursor: pointer;
}
.urban-button-background {
	background-color: rgba(7, 15, 28, 0.6) !important;
}
.urban-button-phone {
	padding-left: 60px;
	position: relative;
}
.urban-button-phone svg {
	position: absolute;
	top: 12px;
	left: 30px;
	width: 20px;
	height: 20px;
}
.urban-button-phone svg {
	transition: all 0.2s;
	fill: var(--text-primary-color);
}
.urban-button-full {
	padding: 0 10px 0 10px;
	width: 100%;
}
.urban-button-secondary {
	background-color: var(--text-secondary-color);
	border: 2px solid var(--text-secondary-color);
	color: #e8d4b8 !important;
}
.urban-button:hover {
	text-decoration: none;
	background-color: transparent;
	color: var(--text-color) !important;
	border: 2px solid var(--text-color);
	font-weight: 700;
}
.urban-button-phone:hover svg {
	fill: var(--text-color);
}
.urban-button-secondary:hover {
	color: var(--text-secondary-color) !important;
	border: 2px solid var(--text-secondary-color);
}
.urban-link {
	color: var(--text-primary-color);
	text-decoration: underline;
}
.urban-link:hover {
	color: var(--text-color);
	text-decoration: underline;
}
@media only screen and (max-width: 768px) {
	.urban-button {
		padding: 0 15px 0 15px;
	}
	.urban-button-phone {
		padding-left: 45px;
	}
	.urban-button-phone svg {
		left: 20px;
	}
}
/* /Button */


/* Header */
#header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 18;
	opacity: 1;
	transform: translateY(0);
	transition: all 0.3s;
	background: linear-gradient(to bottom, rgba(7, 15, 28, 0.99) 0%, rgba(7, 15, 28, 0.75) 55%, rgba(7, 15, 28, 0) 100%);
}
body.header-retracted #header {
	transform: translateY(-100%);
	opacity: 0;
}
#headerbar {
	padding: 30px 0;
	background-color: transparent;
	transition: background 0.3s;
}
body.header-bg #header {
	background-color: var(--background-color);
}
.c-grid-header {
	grid-template-columns: 320px 1fr;
}
#headerlogo a {
	display: inline-block;
}
#headerlogo a img {
	display: inline-block;
	width: 100%;
	max-width: 320px;
}

#headermenu {
	place-self: center;
	width: 100%;
	text-align: right;
}
#headermenu ul {
    list-style-type: none;
	padding: 0;
	margin: 0;
	height: 30px;
	text-align: right;
	display: inline-block;
}
#headermenu ul li {
	float: left;
	padding-left: 60px;
	position: relative;
}
#headermenu ul li a {
	display: inline-block;
	color: #adb0b4;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	text-decoration: none;
	transition: color 0.2s;
}
#headermenu ul li.current_page_item a {
	color: var(--text-primary-color);
}
#headermenu ul li ul {
	opacity: 0;
	background-color: var(--background-color);
	position: absolute;
	left: 40px;
	top: 30px;
	min-width: 240px;
	height: auto;
	pointer-events: none;
	transition: all 0.3s;
	transform: translateY(-50px);
	padding: 10px 0;
}
#headermenu ul li ul li {
	display: block;
	width: 100%;
	padding-left: 0;
	text-align: left;
}
#headermenu ul li ul li a {
	display: block;
	line-height: 48px;
	height: 48px;
	padding: 0 20px;
}
#headermenu ul li a:hover {
	color: var(--text-primary-color);
}
#headermenu ul li:hover ul {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
#headermenuicon {
	display: none;
	text-align: right;
	padding-top: 8px;
}
.menuicon {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 48px;
	cursor: pointer;
}
.menuicon span {
	position: absolute;
	left: 8px;
	right: 0;
	height: 4px;
	background-color: #fff;
	opacity: 1;
	transition: all 0.2s;
}
.menuicon span.a1 {
	top: 10px;
}
.menuicon span.a2 {
	top: calc(50% - 2px);
}
.menuicon span.a3 {
	bottom: 10px;
}
body.mobile-menu-active .menuicon span.a1 {
	top: 22px;
	transform: rotate(45deg);
}
body.mobile-menu-active .menuicon span.a2 {
	opacity: 0;
}
body.mobile-menu-active .menuicon span.a3 {
	bottom: 22px;
	transform: rotate(-45deg);
}
@media only screen and (max-width: 1280px) {
	.c-grid-header {
		grid-template-columns: 160px 1fr;
	}
	#headerlogo a img {
		max-width: 160px;
	}
	#headermenu ul li a {
		font-size: 14px;
	}
}
@media only screen and (max-width: 1024px) {
	#headermenu {
		display: none;
	}
	#headermenuicon {
		display: inline-block;
	}
	.c-grid-header {
		grid-template-columns: 1fr 80px;
	}
}
/* /Header */


/* Mobile */
#mobilemenu {
	z-index: 20;
}
#mobilemenulogo {
	padding: 16px;
}
#mobilemenulogo a {
	display: inline-block;
}
#mobilemenulogo a img {
	width: 100%;
	max-width: 160px;
	display: inline-block;
}
#mobilemenu {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: 280px;
	background-color: #fff;
	color: var(--text-primary-color);
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.3s;
}
#mobilemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
	border-top: 1px solid #eee;
}
#mobilemenu ul li {
	display: block;
	border-bottom: 1px solid #eee;	
}
#mobilemenu ul li ul {
	border-top: none;	
}
#mobilemenu ul li ul li {
	border-top: 1px solid #eee;	
	border-bottom: none;	
}
#mobilemenu ul li a {
	display: block;
	color: #000;
	line-height: 48px;
	font-size: 16px;
	padding: 0 16px;
	height: 48px;
}
#mobilemenu ul li ul li a {
	padding: 0 16px 0 32px;
}
body.mobile-menu-active #mobilemenu {
	transform: translateX(0);
}
@media only screen and (min-width: 1025px) {
	#bg {
		display: none;
	}
	#mobilemenu {
		display: none;
	}
}
/* /Mobile */


/* Stages */
.stages-item-wrapper {
	position: relative;
	margin-top: -80px;
}
.stages-item-wrapper:first-of-type {
	margin-top: 0;
}
.stages-item-wrapper.align-left {
	text-align: left;
}
.stages-item-wrapper.align-right {
	text-align: right;
}
.stages-item-wrap {
	position: relative;
	display: inline-block;
	width: 33%;
	box-sizing: border-box;
	border-radius: calc(var(--border-radius) / 2);
	overflow: hidden;
	padding: 4px;
	z-index: 10;
	background-color:rgba(0, 144, 163, 0.1);
}
.stages-item {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	border-radius: calc(var(--border-radius) / 2 - 2px);
	background-color: var(--box-background-color);
	padding: 30px 30px;
	display: inline-block;
	text-align: left;
	color: var(--text-dimmed-color);
}
.stages-item-line {
	position: absolute;
	top: 50%;
	left: 20%;
	right: 50%;
	height: 2px;
	background-color: var(--text-primary-color);
	z-index: 2;
}
.stages-item-connect {
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	width: 2px;
	background-color: var(--text-primary-color);
	z-index: 2;
}
.stages-item-wrapper:first-of-type .stages-item-connect {
	top: 50%;
	bottom: 0;
}
.stages-item-wrapper:last-of-type .stages-item-connect {
	top: 0;
	bottom: 50%;
}
.stages-item-wrapper.align-right .stages-item-line {
	position: absolute;
	top: 50%;
	right: 20%;
	left: 50%;
}
.stages-item-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80px;
	border-radius: 40px;
	height: 80px;
	background-color: var(--background-color);
	border: 2px solid var(--text-primary-color);
	z-index: 2;
	line-height: 80px;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	color: #e8d4b8;
	z-index: 5;
}
.stages-item-wrapper.align-right .stages-item-dot {
	top: 50%;
	right: 50%;
}
@media only screen and (max-width: 1024px) {
	.stages-item-wrapper {
		margin-top: 0;
	}
	.stages-item-wrapper.align-left {
		text-align: left;
	}
	.stages-item-wrapper.align-right {
		text-align: left;
	}
	.stages-item-wrap {
		width: calc(100% - 100px);
		margin: 15px 0;
	}
	.stages-item {
		padding: 15px 15px;
		font-size: 14px;
		line-height: 22px;
	}
	.stages-item-line {
		right: 40px;
	}
	.stages-item-connect {
		position: absolute;
		left: auto;
		right: 40px;
	}
	.stages-item-wrapper.align-right .stages-item-line {
		position: absolute;
		right: 40px;
		left: 40px;
	}
	.stages-item-dot {
		position: absolute;
		top: 50%;
		left: auto;
		right: 0;
		transform: translate(0,-50%);
	}
	.stages-item-wrapper.align-right .stages-item-dot {
		position: absolute;
		top: 50%;
		left: auto;
		right: 0;
		transform: translate(0,-50%);
	}
}
.stages-item-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		transparent 60%,
		rgba(0, 144, 163, 0.9) 80%,
		transparent 100%
	);
	filter: blur(6px);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 0;
}
.stages-item-wrap:has(.stages-item.active)::before {
	opacity: 1;
	animation: rotate-glow 8s linear infinite;
}
@keyframes rotate-glow {
	to { transform: rotate(360deg); }
}
/* /Stages */


/* CF7 */
.wpcf7 .screen-reader-response {
	display: none;
}
.wpcf7 .hidden-fields-container {
	opacity: 0;
}
.wpcf7 .wpcf7-text {
	display: block;
	width: 100%;
	height: 48px;
	line-height: 48px;
	border: none;
	padding: 0 20px;
	background-color: var(--box-background-color);
	border-radius: calc(var(--border-radius) / 3);
}
.wpcf7 .wpcf7-text:focus{
	outline: none;
}
.wpcf7 .wpcf7-textarea {
	display: block;
	width: 100%;
	line-height: 24px;
	border: none;
	padding: 10px 20px;
	background-color: var(--box-background-color);
	border-radius: calc(var(--border-radius) / 3);
}
.wpcf7 .wpcf7-textarea:focus{
	outline: none;
}
.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
	color: red;
}
.wpcf7 .wpcf7-response-output {
	border-color: red !important;
}
.wpcf7 .wpcf7-list-item {
	display: block;
	margin-bottom: 10px;
}
.wpcf7 .wpcf7-submit {
	padding: 0 20px;
	cursor: pointer;
}
.wpcf7 input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.wpcf7 input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.wpcf7 .wpcf7-list-item-label {
	position: relative;
	padding-left: 40px;
	line-height: 1.3;
}
.wpcf7 .wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	border: 2px solid var(--text-primary-color);
	border-radius: 0;
	background: transparent;
}
.wpcf7 .wpcf7-list-item-label::after {
	content: "×";
	position: absolute;
	left: 2px;
	top: 1.5px;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	font-size: 28px;
	font-weight: 600;
	opacity: 0;
	line-height: 18px;
}
.wpcf7 input[type="checkbox"]:checked ~ .wpcf7-list-item-label::after {
	opacity: 1;
}
.wpcf7 input[type="radio"]:checked ~ .wpcf7-list-item-label::after {
	opacity: 1;
}
.wpcf7 input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before {
	border-color: var(--text-primary-color);
}
.wpcf7 input[type="radio"]:checked ~ .wpcf7-list-item-label::before {
	border-color: var(--text-primary-color);
}
input[type="submit"] {
	opacity: 0;
	height: 1px;
	position: absolute;
}
/* /CF7 */


/* Footer */
.c-grid-footer {
	grid-template-columns: 4fr 2.66fr 2.66fr 2.66fr;
}
.footer-hr {
	background-color: var(--text-primary-color);
	height: 4px;
}
.footer-logo a {
	display: inline-block;
}
.footer-logo a img {
	display: inline-block;
	width: 100%;
	max-width: 320px;
}
.footer-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.footer-menu ul li {
	display: block;
	margin-bottom: 15px;
}
.footer-menu ul li a {
	color: #adb0b4;
}
.footer-menu ul li a:hover {
	color: var(--text-hover-color);
}
.footer-slogan,
.footer-contact,
.footer-copy,
.footer-contact a,
.footer-copy a {
	color: #adb0b4;
}
.footer-contact a:hover {
	color: var(--text-hover-color);
}
.footer-copy a:hover {
	color: var(--text-hover-color);
}
@media only screen and (max-width: 1280px) {
	.footer-logo a img {
		max-width: 160px;
	}
	.footer-contact {
		margin-bottom: 60px;
	}
}
/* /Footer */


/* Formatting */
.mobileonly {
	display: none;
}
.desktoponly {
	display: block;
}
.wideonly {
	width: 100%;
}
/* /Formatting */


/* Pagination */
.navigation.pagination .screen-reader-text {
	display: none;
}
.navigation.pagination .nav-links .page-numbers {
	display: inline-block;
	text-decoration: none;
	padding: 0 20px;
	line-height: 28px;
	height: 32px;
	background-color: transparent;
	color: #333;
	border: 2px solid var(--text-color);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 12px;
	margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}
.navigation.pagination .nav-links .page-numbers.current {
	background-color: var(--text-color);
	color: #fff;
}
.navigation.pagination .nav-links .page-numbers:hover {
	border: 2px solid var(--theme-primary-color) !important;
	color: var(--theme-primary-color) !important;
}
.navigation.pagination .nav-links .page-numbers.current:hover {
	border: 2px solid var(--theme-primary-color) !important;
	background-color: var(--theme-primary-color) !important;
	color: #fff !important;
}
/* /Pagination */


/* Animations */
.customAnim.animFadeUp {
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
.customAnim.animFadeUp.come-in {
	opacity: 1;
	animation: afu-come-in 0.4s ease forwards;
	-webkit-transform: -webkit-translateY(200px);
	transform: translateY(200px);
}
@keyframes afu-come-in {
	to {
		-webkit-transform: -webkit-translateY(0);
		transform: translateY(0);
	}
}
/* /Animations */


/* FAQ */
.faq-items {
	padding: 30px;
	background-color: var(--box-background-color);
	border-radius: var(--border-radius);
}
.faq-item {
	border-bottom: 1px solid var(--text-dimmed-color);
}
.faq-item-inner {
	padding: 36px 18px;
}
.faq-item-title {
	position: relative;
	padding-right: 48px;
	cursor: pointer;
	transition: color 0.2s;
}
.faq-item-arrow {
	position: absolute;
	top: 0;
	right: 4px;
	width: 18px;
	height: 18px;
	border-right: 2px solid var(--text-color);
	border-bottom: 2px solid var(--text-color);
	transform: rotate(45deg);
	transition: all 0.2s;
	pointer-events: none;	
}
.faq-item-title:hover h4 {
	color: var(--text-hover-color);
}
.faq-item-title:hover .faq-item-arrow {
	border-color: var(--text-hover-color);
}
.faq-item-content {
	height: 0;
	overflow: hidden;
}
.faq-item.active .faq-item-content {
	height: auto;
}
.faq-item.active .faq-item-arrow {
	top: 8px;
	transform: rotate(225deg);
}
/* /FAQ */


/* Team */
.team-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	margin-bottom: 30px;
}
.team-item {
	background-color: var(--box-background-color);
	border-radius: var(--border-radius);
}
.team-item-inner {
	padding: 30px 20px;
	text-align: center;
}
@media only screen and (max-width: 1024px) {
	.team-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}
}
@media only screen and (max-width: 768px) {
	.team-grid {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-column-gap: 0;
	}
}
/* /Team */


/* Services */
.service-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}
.service-item {
	background-color: var(--box-background-color);
	border-radius: calc(var(--border-radius) / 2);
}
.service-item-inner {
	padding: 50px 40px;
}
.service-item-content {
	color: var(--text-dimmed-color);
}
.service-item-content ul {
    list-style-type: none;
}
.service-item-content ul li {
	display: block;
	padding-left: 40px;
	background-size: 28px 28px;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url('/wp-content/themes/jd-fachplanung/images/arrow-right.svg');
	margin-top: 20px;
}
@media only screen and (max-width: 1024px) {
	.service-grid {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-column-gap: 0;
		grid-row-gap: 20px;
	}
}
@media only screen and (max-width: 768px) {
	.service-item-inner {
		padding: 20px 15px;
	}
}
/* /Services */


/* Jobs */
.job-item-content {
	color: var(--text-dimmed-color);
}
.job-item-content ul {
    list-style-type: none;
	margin-bottom: 30px;
}
.job-item-content ul li {
	display: block;
	padding-left: 40px;
	background-size: 28px 28px;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url('/wp-content/themes/jd-fachplanung/images/arrow-right.svg');
	margin-top: 20px;
}
.job-urban-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 0;
	grid-row-gap: 0;
	background-color: var(--box-background-color);
	border-radius: calc(var(--border-radius) / 2);
	overflow: hidden;
}
.job-urban-box {
	background-color: var(--box-background-color);
	border-radius: calc(var(--border-radius) / 2);
	color: var(--text-dimmed-color);
	padding: 30px 30px;
}
.job-urban-box-border {
	border-left: 4px solid var(--text-primary-color);
	border-radius: 0 calc(var(--border-radius) / 2) calc(var(--border-radius) / 2) 0;
}
.c-col-job {
	padding: 30px 30px;
	color: var(--text-dimmed-color);
}
.c-col-job-dark {
	background-color: rgba(0,0,0,0.2);
}
.job-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	margin-bottom: 30px;
}
.job-item {
	background-color: var(--box-background-color);
	border-radius: var(--border-radius);
}
.job-item-inner {
	padding: 30px 30px;
	text-align: center;
}
.job-item-button-spacing {
	height: 48px;
}
.job-item-button-wrapper {
	text-align: center;
	position: absolute;
	right: 0;
	bottom: 30px;
	left: 0;
}
@media only screen and (max-width: 768px) {
	.job-urban-grid {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-column-gap: 0;
	}
	.job-grid {
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-column-gap: 0;
	}
}
/* /Jobs */


/* Portfolio */
.portfolio-items table td {
	color: var(--text-dimmed-color);
	font-size: 18px;
	line-height: 26px;
	padding-bottom: 5px;
	vertical-align: top;
}
.portfolio-item {
	background-color: var(--box-background-color);
	border-radius: var(--border-radius);
}
.portfolio-item-inner {
	padding: 60px 80px;
}
.portfolio-line {
	color: var(--text-primary-color) !important;
	font-weight: 700;
	padding-bottom: 20px !important;
}
.portfolio-line-project {
	width: 55%;
}
.portfolio-line-phase {
	width: 25%;
}
.portfolio-line-volume {
	width: 20%;
}
.portfolio-space {
	border-top: 1px solid var(--text-dimmed-color);
	height: 20px;
}
.portfolio-item-title {
	background-position: left 0;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	min-height: 56px;
	padding-left: 58px;
}
@media only screen and (max-width: 1024px) {
	.portfolio-item-inner {
		padding: 30px 40px;
	}
}
@media only screen and (max-width: 768px) {
	.portfolio-items table td {
		font-size: 14px;
		line-height: 22px;
	}
	.portfolio-item-inner {
		padding: 30px 20px;
	}
	.portfolio-line-project {
		width: 57%;
	}
	.portfolio-line-phase {
		width: 18%;
	}
	.portfolio-line-volume {
		width: 25%;
	}
	.portfolio-item-title {
		background-size: 26px 26px;
		padding-left: 46px;
	}
}
/* /Portfolio */


/* Hero */
.c-hero-content {
	animation: hero-bg-fade 8s ease-in-out infinite;
	background-image: url('/wp-content/themes/jd-fachplanung/images/hero.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}
@keyframes hero-bg-fade {
	0% {
		background-color: #614f3b;
	}
	10% {
		background-color: #614f3b;
	}
	11% {
		background-color: #ffffff;
	}
	12% {
		background-color: #342819;
	}
	13% {
		background-color: #ffffff;
	}
	80% {
		background-color: #d2a574;
	}
	100% {
		background-color: #614f3b;
	}
}
.c-hero-alt-content {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
}
/* /Hero */


/* Dibon */
.dibon {
	position: relative;
}
.dibon img {
	display: inline-block;
	position: absolute;
	bottom: -80px;
	left: -60px;
	width: 90%;
}
.dibontext {
	text-align: right;
}
@media only screen and (max-width: 1024px) {
	.dibon {
		position: static;
		text-align: center;
	}
	.dibon img {
		position: static;
		max-height: 320px;
		width: auto;
	}
	.dibontext {
		text-align: center;
	}
}
/* /Dibon */


.urban-box {
	background-color: var(--box-background-color);
	border-radius: calc(var(--border-radius) / 2);
	color: var(--text-dimmed-color);
	padding: 30px 15px;
}
.urban-box-icon-wrapper {
	text-align: center;
}
.urban-box-icon {
	display: inline-block;
	width: 90px;
	height: 90px;
}
.urban-box-icon-small-wrapper {
	text-align: center;
	width: 105px;
	height: 45px;
}
.urban-box-icon-small {
	display: inline-block;
	width: 45px;
	height: 45px;
}
.urban-box-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	grid-template-rows: auto;
}
.urban-box-grid-narrow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	grid-template-rows: auto;
	width: 75%;
	margin: 0 auto;
}
.urban-box-border {
	display: block;
	padding-top: 15px;
	margin-top: 15px;
	border-top: 1px solid var(--text-primary-color);
}
@media only screen and (max-width: 1280px) {
	.urban-box-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.urban-box-grid-narrow {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width: 768px) {
	.urban-box-grid {
		grid-template-columns: 100%;
		grid-column-gap: 0;
		grid-row-gap: 30px;
	}
	.urban-box-grid-narrow {
		grid-template-columns: 100%;
		grid-column-gap: 0;
		grid-row-gap: 30px;
	}
}

.urban-box-text {
	position: absolute;
	top: 50%;
	right: 0;
	bottom: auto;
	left: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

.urban-box-transparent-wrapper {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom center;
	background-image: url('/wp-content/themes/jd-fachplanung/images/dibon.png');
	position: relative;
	padding-bottom: 100%;
}
.urban-box-transparent {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(5, 35, 47, 0.9);
	border-radius: calc(var(--border-radius) / 2);
	padding: 45px 60px;
}
@media only screen and (max-width: 768px) {
	.urban-box-transparent {
		padding: 15px 30px;
	}
}

.lightonhover img {
	transition: filter 0.3s;
}
.lightonhover:hover img {
	filter: brightness(150%);
}

.relative {
	position: relative;
}
.absolute {
	position: absolute;
}

.p0 {
	padding: 0 !important;
}
.m0 {
	margin: 0 !important;
}
.pt10 {
	padding-top: 10px !important;
}
.pt20 {
	padding-top: 20px !important;
}
.pt30 {
	padding-top: 30px !important;
}
.pr10 {
	padding-right: 10px !important;
}
.pr20 {
	padding-right: 20px !important;
}
.pr30 {
	padding-right: 30px !important;
}
.pl10 {
	padding-left: 10px !important;
}
.pl20 {
	padding-left: 20px !important;
}
.pl30 {
	padding-left: 30px !important;
}
.pb10 {
	padding-bottom: 10px !important;
}
.pb20 {
	padding-bottom: 20px !important;
}
.pb30 {
	padding-bottom: 30px !important;
}
.py10 {
	padding-top: 10px;
	padding-bottom: 10px;
}
.py20 {
	padding-top: 20px;
	padding-bottom: 20px;
}
.py30 {
	padding-top: 30px;
	padding-bottom: 30px;
}
.mt0 {
	margin-top: 0 !important;
}
.mb0 {
	margin-bottom: 0;
}
.mb10 {
	margin-bottom: 10px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb40 {
	margin-bottom: 40px;
}
.mb50 {
	margin-bottom: 50px;
}
.mb60 {
	margin-bottom: 60px;
}
.mr10 {
	margin-right: 10px;
}
.mr20 {
	margin-right: 20px;
}
.mr30 {
	margin-right: 30px;
}
.mr40 {
	margin-right: 40px;
}
.ml10 {
	margin-left: 10px;
}
.ml20 {
	margin-left: 10px;
}
.ml30 {
	margin-left: 10px;
}
.mt10 {
	margin-top: 10px;
}
.mt20 {
	margin-top: 20px;
}
.w100 {
	width: 100% !important;
}


/* Responsive */
@media only screen and (max-width: 1280px) {

	.c-grid-footer {
		grid-template-columns: 100%;
		grid-column-gap: 0;
	}
	#headerbar {
		padding: 15px 0;
	}
	.c-spacer-header {
		height: 96px;
	}

}
@media only screen and (max-width: 1024px) {

	/* Content */
	.c-content-inner {
		padding: 0 30px;
	}
	/* /Content */

	/* Columns */
	.c-col-1, .c-col-2, .c-col-3 {
		width: 50%;
	}
	.c-col-4, .c-col-5, .c-col-6, .c-col-7, .c-col-8, .c-col-9, .c-col-10, .c-col-11, .c-col-12 {
		width: 100%;
	}
	/* /Columns */

	/* Grid */
	.c-grid-5-2-2-3,
	.c-grid-4-2-3-3,
	.c-grid-4-3-3-2,
	.c-grid-4-3-2-3,
	.c-grid-3-3-3-3 {
		grid-template-columns: 100%;
		grid-column-gap: 0;
	}
	.c-grid-4-1-7,
	.c-grid-4-4-4 {
		grid-template-columns: 100%;
		grid-column-gap: 0;
	}
	.c-grid-6-6 {
		grid-template-columns: 100%;
		grid-column-gap: 0;
	}
	.c-grid-3-3-3-3 {
		grid-template-columns: repeat(2, 1fr);
	}
	/* /Grid */

}
@media only screen and (max-width: 768px) {

	/* Content */
	.c-content-inner {
		padding: 0 15px;
	}
	/* /Content */

	/* Formatting */
	.mobileonly {
		display: block;
	}
	.desktoponly {
		display: none;
	}

	.textlarge {
		font-size: 32px;
		line-height: 40px;
	}
	.textbody {
		font-size: 18px;
		line-height: 30px;
	}

	h1, .h1 {
		font-size: 26px;
		line-height: 34px;
	}
	h2 {
		font-size: 24px;
		line-height: 32px;
	}
	h3 {
		font-size: 22px;
		line-height: 30px;
	}
	h4 {
		font-size: 20px;
		line-height: 28px;
	}
	h5 {
		font-size: 18px;
		line-height: 26px;
	}
	/* /Formatting */

	/* Columns */
	.c-row {
		clear: both;
		margin: 0 0 -18px 0;
	}
	.c-col-1, .c-col-2, .c-col-3, .c-col-4, .c-col-5, .c-col-6,
	.c-col-7, .c-col-8, .c-col-9, .c-col-10, .c-col-11, .c-col-12 {
		width: 100%;
		padding: 0 0 18px 0;
	}
	/* /Columns */

	/* Grid */
	.c-grid {
		clear: both;
		grid-row-gap: 30px;
		width: 100%;
	}
	.c-grid-3-3-6,
	.c-grid-3-6-3,
	.c-grid-6-3-3 {
		grid-template-columns: 100%;
		grid-column-gap: 0;
	}
	.c-grid-7-5,
	.c-grid-5-7 {
		grid-template-columns: 100%;
		grid-column-gap: 0;
	}
	.c-grid-4-8,
	.c-grid-8-4 {
		grid-template-columns: 100%;
		grid-column-gap: 0;
	}
	.c-grid-3-9,
	.c-grid-9-3 {
		grid-template-columns: 100%;
		grid-column-gap: 0;
	}
	/* /Grid */

	/* Spacers */
	.c-spacer {
		clear: both;
		height: 20px;
	}
	.c-spacer-small {
		clear: both;
		height: 20px;
	}
	.c-spacer-half {
		clear: both;
		height: 20px;
	}
	.c-spacer-double {
		clear: both;
		height: 40px;
	}
	.c-spacer-section {
		clear: both;
		height: 90px;
	}
	/* /Spacers */

}
/* Responsive */