/* USER VARIABLES SECTION */

:root {
	--accent: #f9c806;
	--text: #000d1a;
	--link: #436187;
	--regular-text: 16px;
	--lineheight: 32px;
	--userfont: montserrat-itf, sans-serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	--index: calc(1vw + 1vh);
	--transition: 1.5s cubic-bezier(.05, .5, 0, 1);
}

/* BOOTSTRAP SETTINGS SECTION */

/* gutter 20px (10px + 10px). Comment this code for default gutter start at 1.5rem (24px) wide. */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: .625rem; }
.row, .row > * { --bs-gutter-x: 2rem; }

/* FONTS LOAD SECTION */

@font-face { src: url("../fonts/montserrat-regular-webfont.woff2") format("woff2"); font-family: "montserrat-itf"; font-weight: 400; font-style: normal; }
@font-face { src: url("../fonts/montserrat-medium-webfont.woff2") format("woff2"); font-family: "montserrat-itf"; font-weight: 500; font-style: medium; }
@font-face { src: url("../fonts/montserrat-bold-webfont.woff2") format("woff2"); font-family: "montserrat-itf"; font-weight: 700; font-style: bold; }
@font-face { src: url("../fonts/montserrat-extrabold-webfont.woff2") format("woff2"); font-family: "montserrat-itf"; font-weight: 800; font-style: bold; }
@font-face { src: url("../fonts/montserrat-black-webfont.woff2") format("woff2"); font-family: "montserrat-itf"; font-weight: 900; font-style: bold; }

/* GENERAL CSS SETTINGS */

::placeholder { color: #b9b9b9; }
::selection { background-color: var(--accent); color: #fff; }
input, textarea { outline: none; }
input:focus:required:invalid, textarea:focus:required:invalid { border-color: #ff7e00; }
input:required:valid, textarea:required:valid { border-color: #6baa40; }

body {
	font-family: var(--userfont);
	font-size: var(--regular-text);
	line-height: var(--lineheight);
	color: var(--text);
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
	background-color: #fefefe;
}

.hidden {
	display: none;
}

/* USER STYLES */
.image {
	max-width: 100%;
	border-radius: 20px;
}

.accent {
	color: var(--accent);
}

h1 {
	font-weight: 700;
	font-size: 50px;
	font-style: italic;
}

h2 {
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 8px;
}

h3 {
	font-weight: 700;
	font-size: 16px;
}

section h1 {
	margin-bottom: 30px;
}

.action_descr h2 {
	color: #fff;
	font-weight: 900;
}

a {
	text-decoration: none;
	transition: color .25s ease, background-color .25s ease;
	color: var(--link);
}

a:hover {
	color: var(--accent);
}

button {
	padding: 0;
	margin: 0;
	border: none;
	background-color: transparent;
	line-height: 0;
}

.button {
	background-color: #ffcc00;
	color: #000;
	padding: 25px 32px 25px 32px;
	border-radius: 10px;
	cursor: pointer;
	transition: color .25s ease, background-color .25s ease;
}

button.button {
	padding: 32px;
}

.button:hover {
	background-color: var(--accent);
	color: #000;
}

.button:focus {
	background-color: #e39f00;
	color: #fff;
}

/* FIRST SCREEN */



.layers {
	perspective: 1000px;
	overflow: hidden;
}

.layers__container {
	height: 100vh;
	transform-style: preserve-3d;
	transform: rotateX(var(--move-y)) rotateY(var(--move-x));
	will-change: transform;
	transition: transform var(--transition);
}

.layers__item {
	position: absolute;
	inset: -5vw;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.layer-1 {
	transform: translateZ(-44px) scale(1.06);
}

.layer-2 {
	transform: translateZ(100px) scale(.80);
}

.layer-3 {
	transform: translateZ(180px) scale(.8);
}

.layer-4 {
	transform: translateZ(190px) scale(.9);
}

.layer-5 {
	transform: translateZ(290px) scale(.9);
}

.hero-content {
	width: 372px;
	margin-left: -20%;
	color: #fff;
	margin-top: 60px;
}

.hero-content h1{
	font-size: 50px;
	font-weight: 900;
	margin-bottom: 15px;
}

.hero-content__p {
	margin-bottom: 40px;
}

.layer-4, .layer-5, .layer-6 {
	pointer-events: none;
}

/* HEADER */
.top-line {
	width: 100%;
	padding: 15px 0;
}

.top-line img.verband {
	max-width: 100px;
	height: 100px;
}

.top-line img.zertifikate {
	max-width: 132px;
	height: 115px;
}

.top-line img.fka {
	max-width: 105px;
}

.top-line p.fka {
	font-size: 22px;
	font-weight: bold;
	font-style: italic;
}

.top-line .logo img {
	max-width: 316px;
}

.top-line .main-menu ul li .mPS2id-highlight {
	color: var(--accent);
}

.nav-wrapper {
	background-color: #000d1a;
	border-radius: 20px;
	padding: 25px 35px 22px 35px;
	background-image: url(../img/bg-nav.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.telefon li {
	font-weight: 700;
	color: #fff;
}

.telefon li span {
	color: var(--accent);
}

.telefon li:nth-child(1) {
	padding-left: 0;
}

.telefon li a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 400;
}

.main-menu {
	font-weight: 500;
}

.main-menu ul, .telefon {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 45px;
}

.main-menu ul li, .telefon li {
	display: inline-block;
	padding-left: 30px;
}

.main-menu ul li:nth-child(1) {
	padding-left: 0;
}

.main-menu ul li a {
	text-decoration: none;
	color: #fff;
	border: 0;
}

.main-menu ul li {
	position: relative;
}

.main-menu ul li a:hover {
	color: var(--accent);
}

.main-menu ul li:hover ul.sub-menu {
	visibility: visible;
	opacity: 1;
}

.telefon li a:hover {
	color: #ff7e00;
}

ul.sub-menu {
	visibility: hidden;
	opacity: 0;
	list-style-type: none;
	margin: 0;
	position: absolute;
	top: 37px;
	left: -5px;
	background-color: #121117;
	padding: 20px 37px 20px 37px;
	line-height: 42px;
	z-index: 10;
	transition: all .25s ease-in-out 0s;
	border-radius: 0 0 20px 20px;
}

ul.sub-menu li {
	padding: 0;
}

ul.sub-menu li a {
	color: #808080;
	text-decoration: none;
	white-space: nowrap;
}

.mobile-menu-button {
	width: 20px;
	height: 17px;
	display: none;
	line-height: 38px;
	cursor: pointer;
}

.mobile-menu {
	display: none;
	position: relative;
	top: -16px;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}

.mobile-menu ul {
	padding: 0 37px 20px 37px;
}

.mobile-menu ul li {
	display: block;
	padding: 0;
}

.mobile-menu .top-menu {
	display: block;
}


/* SLIDER */
.accordion-wrapper {
	padding-top: 30px;
}

.accordion {
	display: flex;
	gap: 20px;
}

.accordion__col {
	position: relative;
	z-index: 1;
	height: 65vh;
	overflow: hidden;
	border-radius: 20px;
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 210px;
	cursor: pointer;
	transition: all 1s;
	color: #fff;
}

.accordion__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: all 1s;
}

.accordion__bg img {
	display: block;
}

.accordion__col.active {
  width: 100%;
  flex: 5;
}

.accordion__bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.accordion__col.active .accordion__bg::after {
	background: #000d1a;
  opacity: .50;
	transition: all .7s;
}

[data-parallax-target] {
  height: 120%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  top: -10%;
  transform-origin: 50% 50%;
}

.accordion__start {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 22px;
	font-weight: 500;
  transition: var(--transition);
  transition-delay: .3s;
}

.accordion__col.active .accordion__start {
  opacity: 0;
  transition-delay: .1s;
}

.accordion__content {
  padding: 0 40px;
}

.accordion__header {
	overflow: hidden;
	padding-bottom: 5px;
}

.accordion__header h2 {
	font-size: 50px;
	color: var(--accent);
	font-weight: 500;
	font-style: italic;
	padding-bottom: 0;
	margin-top: -5px;
	display: inline-block;
	opacity: 0;
	visibility: hidden;
	background-clip: text;
	transform: translate(0, 130%) rotate(10deg);
  transition: var(--transition);
  transition-duration: 1s;
}

.accordion__col.active .accordion__header h2 {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) rotate(0);
}

.accordion__description {
	width: 460px;
	opacity: 0;
	transform: translate(0, 20%);
  transition: var(--transition);
  transition-duration: 1s;
  font-kerning: none;
}

.accordion__col.active .accordion__description {
  opacity: .8;
  transform: translate(0, 0);
}

.accordion__description p {
	margin-bottom: 15px;
}

.accordion__description a {
	color: var(--accent);
}

.accordion__description a:hover {
	color: #ff7e00;
}

/* FORM */
form label {
	display: block;
	color: var(--text);
	margin-bottom: 0;
	text-align: right;
	line-height: 20px;
	cursor: pointer;
}

form label.container {
	display: block;
	position: relative;
	margin: 11px 0 18px;
	padding-left: 28px;
	text-align: left;
	cursor: pointer;
	user-select: none;
	font-size: 16px;
	line-height: 32px;
}

form label.container input {
	position: absolute;
	top: 0;
	left: -24px;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

form label.container input:checked~.checkmark {
	border: 1px solid #6baa40;
}

form label.container input:checked~.checkmark:after {
	display: block;
}

form label.container .checkmark {
	position: absolute;
	top: 6px;
	left: 0;
	height: 20px;
	width: 20px;
	border: 1px solid #808080;
	border-radius: 3px;
}

form label.container .checkmark:after {
	content: '';
	position: absolute;
	display: none;
	left: 7px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #6baa40;
	border-width: 0 1px 1px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

form label:last-child {
	margin-bottom: 0;
}

form input, textarea, select {
	display: inline-block;
	padding: 15px 30px 15px 30px;
	margin: 11px 0;
	width: 100%;
	border-radius: 10px;
	border: 1px solid #b9b9b9;
}

form textarea {
	height: 173px;
}

form select {
	border: 1px solid #b9b9b9;
	outline: none;
	cursor: pointer;
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	overflow: hidden;
	background-image: url('../img/icons/arrow.svg');
	background-repeat: no-repeat;
	background-position: 431px center;
	background-size: 11px;
}

form select:required:invalid {
	color: #b9b9b9;
}

form select:required:valid {
	border-color: #6baa40;
}

form select option {
	color: var(--text);
}

form .checkbox {
	min-width: 20px;
	min-height: 20px;
	margin-right: 7px;
	float: left;
}

form button.button {
	color: var(--text);
}

/* POPUP */
.sub_telefon, .popup_content {
	position: relative;
	margin: 0 auto;
	border-radius: 20px;
	z-index: 10;
	padding: 45px;
	text-align: left;
	background-color: #fff;
	width: 422px;
}

.popup_content {
	width: 70%;
	padding: 65px;
}

.popup_content p, .popup_content h1, .popup_content h2  {
	margin-bottom: 30px;
}

.content_wrapper p, .content_wrapper h1, .content_wrapper h2  {
	margin-bottom: 30px;
}

.sub_telefon h2 {
	color: var(--text);
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 12px;
}

.mfp-content .mfp-close {
	opacity: 1;
	width: 18px;
	height: 18px;
	top: 39px;
	right: 40px;
	position: absolute;
	transition: all .25s;
	opacity: 0.57;
}

.mfp-content .mfp-close:after {
	position: absolute;
	content: '';
	background-image: url(../img/icons/close.svg);
	width: 18px;
	height: 18px;
	top: 10px;
	right: 10px;
	display: block;
}

.mfp-content .mfp-close:hover {
	opacity: 1;
}

/* LEISTUNGEN */
.leistungen, .vorteile {
	margin: 68px 0 -38px 0;
}

.leistung_descr, .vorteil_descr, .ablauf_content, .kurzportrait_content, .kontakt .kontakt_content {
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.06); 
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.06);
	padding: 45px;
	border-radius: 20px;
	position: relative;
	bottom: 120px;
	margin-bottom: -88px;
}

.leistung_item .shadow_descr, .kontakt_item .shadow_descr {
	position: relative;
	margin-bottom: -88px;
	filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.06));
}

.team .leistung_descr {
	min-height: 252px;
	bottom: 70px;
}

.team .leistung_item .shadow_descr {
	margin-bottom: 35px;
}

.fuhrpark .leistung_descr {
	bottom: 40px;
}

.fuhrpark .leistung_item .shadow_descr {
	margin-bottom: 80px;
}

.leistung_descr, .kontakt_descr {
	border-radius: 0 0 20px 20px;
	clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
	position: relative;
	box-shadow: none;
	background-color: #fff;
  padding: 45px;
}

.leistung_descr p, .vorteil_descr p {
	margin-bottom: 0;
}

.leistung_descr span {
	color: #808080;
}

.leistungen .action_item, .vorteile .action_item {
	position: relative;
}

.leistungen .action_item .action_descr {
	position: absolute;
	width: 206px;
	bottom: 45px;
	left: 25%;
}

.leistungen .action_item .action_descr h2 {
	line-height: 32px;
	margin-bottom: 0;
}

.leistungen .action_item .action_descr a:hover {
	color: #0096ff;
}

.leistungen .action_item .action_descr a img {
	width: 9px;
	transform: rotate(-90deg);
}

.accordion__description a img, .leistung_descr a img, .kurzportrait a img{
	width: 9px;
	transform: rotate(-90deg);
}

/* VORTEILE */
.vorteile {
	margin: 68px 0 0 0;
}

.vorteile .shadow_descr {
	position: relative;
	filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.06));
	margin-left: -40px;
}

.vorteile .vorteil_descr {
	bottom: 0;
	margin-bottom: 0;
	border-radius: 0 20px 20px 0;
	clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
	position: relative;
	box-shadow: none;
}

.vorteile .vorteil_item {
	margin-bottom: 32px;
}

.vorteile .action_item {
	background-image: url(../img/action/a2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	border-radius: 20px;
	padding: 100px;
}

.vorteile .action_item .action_descr h1 {
	color: #fff;
	font-weight: 900;
	margin-bottom: 0;
	margin-right: 32px;
	display: inline-block;
	position: relative;
	top: 10px;
}

.zertifikate img.verband {
	max-width: 220px;
}

.zertifikate img.azav {
	max-width: 285px;
	margin-left: 100px;
}

.zertifikate img.hza {
	max-width: 260px;
}

/* PREISE */
.preise .preis_item .preis_descr span{
	position: absolute;
	left: -98px;
	font-size: 32px;
	line-height: 32px;
	font-weight: 800;
	text-align: right;
	width: 102px;
	color: #fff;
}

/* ABLAUF */
.ablauf, .kurzportrait, .kontakt {
	margin-top: 36px;
}

.ablauf .ablauf_content, .kontakt .kontakt_content {
	bottom: 0;
	margin-bottom: 0;
	margin-right: -30px;
	width: 100%;
	padding: 77px 77px 25px 77px;
}

.ablauf .ablauf_content .ablauf_item img {
	border-radius: 50%;
}

.ablauf .ablauf_content .ablauf_item .ablauf_descr {
	margin-top: -8px;
	margin-left: 20px;
	margin-bottom: 42px;
}

.ablauf .ablauf_content .ablauf_item .ablauf_descr h3, p, .kurzportrait .kurzportrait_content h2 {
	margin-bottom: 0;
	line-height: 32px;
}

/* KURZPORTRAIT */
.kurzportrait {
	margin-top: 68px;
}

.kurzportrait .shadow_descr {
	position: relative;
	filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.06));
	margin-left: -60px;
}

.kurzportrait .kurzportrait_content {
	border-radius: 0 20px 20px 0;
	clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
	box-shadow: none;
	background-color: #fff;
	bottom: 0;
	margin-bottom: 0;
	position: relative;
	width: 100%;
	padding: 77px 77px 25px 107px;
}

.news .kurzportrait_content {
	clip-path: polygon(3% 0, 100% 0, 100% 100%, 0 100%);
}

section.content {
	margin: 30px 0;
}

.content_wrapper {
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.06); 
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.06);
	padding: 65px;
	border-radius: 20px;
}

.kurzportrait .kurzportrait_content p, .kontakt .kontakt_content p {
	margin-bottom: 28px;
}

.kurzportrait .kurzportrait_content span{
	font-weight: 700;
}

/* KONTAKT */
.kontakt {
	margin-top: 68px;
}

.kontakt .kontakt_content {
	background-color: #dfdfdf;
}

.kontakt_descr {
	padding: 77px;
	margin-top: -200px;
}

.kontakt_descr h3 {
	margin-top: 20px;
}

.kontakt_descr span {
	color: #808080;
}

.kontakt, .footer {
	margin-bottom: 32px;
}

.kontakt .kontakt_content .form_kontakt {
	width: 470px;
	margin-bottom: 35px;
}

/* FOOTER */
.footer .footer_content {
	background-image: url(../img/footer.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	border-radius: 20px;
	padding: 60px 70px 50px 70px;
	color: #fff;
}

.footer .footer_content .footer_item .copyright {
	opacity: 0.66;
}

.footer .footer_content .footer_item ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer .footer_content .footer_item .footer-menu li {
	display: inline-block;
	padding-right: 30px;
}

.footer .footer_content .footer_item .footer-menu li a {
	color: #fff;
}

.footer .footer_content .footer_item .footer-menu li a:hover {
	color: var(--accent);
}

.footer .footer_content .footer_item .footer_kontakt {
	font-weight: 700;
}

.footer .footer_content .footer_item .footer_kontakt span {
	font-weight: 400;
	opacity: 0.66;
}

.footer .footer_content .footer_item .footer_kontakt a {
	font-weight: normal;
	color: var(--accent);
}

.footer .footer_content .footer_item .footer_kontakt a:hover {
	color: #ff6600;
}

.footer .footer_content .footer_item .footer_address li {
	opacity: 0.66;
}

.footer .footer_content .footer_item .footer_address li:first-child {
	opacity: 1;
}

.footer .footer_content .footer_item .social_icons {
	display: inline-block;
	line-height: 0;
	margin-left: 20px;
	margin-top: 10px;
}

.footer .footer_content .footer_item .social_icons:first-child {
	margin-left: 0;
}

.footer .footer_content .footer_item .social_icons li{
	margin-bottom: 30px;
}

.footer .footer_content .footer_item .social_icons img {
	width: 22px;
	opacity: 0.66;
	transition: all .25s ease-in-out 0s;
}

.footer .footer_content .footer_item .social_icons img:hover {
	opacity: 1;
}

.footer .footer_content .footer_item .social_icons .insta {
	width: 20px;
}