/*
	Theme Name: 	Almond GmbH
	Datum: 			11. Januar 2024
	Version: 		1.0
	Author: 		id-script // grafik . print . web
	Author URI: 	https://www.id-script.com/
*/

/* ================================================
    -- Default
================================================ */

:root {
	--black:			#222;
	--white: 			#ffffff;
	--grey:				#f6f6f6;
	--font-p:			#555;
	--font-b:  			#0C1017;
	--green:			#5EA2C4/*#6dae09*/;
	--middlegreen:		#63889A/*#4a735d*/;
	--darkgreen:		#384044/*#014421*/;
	--fonts-main:		'Mulish';
	--fonts-secondary:	'Barlow Semi Condensed';
}

::-moz-selection {
	color: var(--white);
	background: var(--darkgreen);
}

::selection {
	color: var(--white);
	background: var(--darkgreen);
}

body {
	position: relative;
	background: var(--grey);
	font-family: var(--fonts-main), sans-serif;
	font-weight: 500;
	letter-spacing: 0.75px;
	line-height: 1.625;
	font-size: 20px;
	color: var(--font-p);
}

.bg-white {
	background: var(--white);
}

/* ================================================
	-- Fonts
================================================ */
.title-h1 {
	font-size: 60px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--darkgreen);
	font-weight: 600;
	letter-spacing: 2px;
	font-family: var(--fonts-secondary);
	width: 100%;
}

.title-h2 {
	font-family: var(--fonts-secondary);
	font-size: 60px;
	line-height: 1;
	font-weight: 500;
	color: var(--darkgreen);
	letter-spacing: -1px;
	margin-bottom: 32px;
	z-index: 5;
	position: relative;
	width: 100%;
}

.title-h2 span {
	z-index: -5 !important;
	font-family: "Oswald";
	color: var(--white);
	font-size: 300px;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 0px 3px #5EA2C4;
	position: absolute;
	left: 20px;
	top: -70px;
}

.title-h3 {
	z-index: 5;
	font-family: var(--fonts-secondary);
	font-size: 26px;
	font-weight: 500;
	color: var(--middlegreen);
	position: relative;
	line-height: 1.5;
	margin-bottom: 16px;
}

.title-h4 {
	font-family: var(--fonts-secondary);
	font-size: 22px;
	letter-spacing: 1px;
	border-bottom: 2px solid var(--green);
	border-top: 2px solid var(--green);
	color: var(--green);
	text-transform: uppercase;
	padding: 4px 0 4px 12px;
	font-weight: 700;
	margin-bottom: 22px;
	width: 100%;
}

.title-h5 {
	font-size: 18px;
	font-weight: 500;
	color: var(--font-b);
}

address p {
	font-size: 18px;
}

a {
	display: block;
	text-decoration: none;
	color: var(--font-p);
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
	cursor: pointer;
}

b {
	font-weight: 600;
	color: var(--darkgreen);
}

strong {
	font-weight: 600;
	color: var(--green);
}

p {
	hyphens: auto;
}

@media screen and (min-width: 64em){



}

/* ================================================
    -- Links
================================================ */

/* -- Link: .link-01
------------------------------------ */

.link-1 .the-arrow {
	width: 64px;
	transition: all 0.2s;
  }
  .link-1 .the-arrow.-left {
	position: absolute;
	top: 60%;
	left: 0;
  }
  .link-1 .the-arrow.-left > .shaft {
	width: 0;
	background-color: var(--green);
  }
  .link-1 .the-arrow.-left > .shaft:before,
  .link-1 .the-arrow.-left > .shaft:after {
	width: 0;
	background-color: var(--green);
  }
  .link-1 .the-arrow.-left > .shaft:before {
	transform: rotate(0);
  }
  .link-1 .the-arrow.-left > .shaft:after {
	transform: rotate(0);
  }
  .link-1 .the-arrow.-right {
	top: 3px;
  }
  .link-1 .the-arrow.-right > .shaft {
	width: 64px;
	transition-delay: 0.2s;
  }
  .link-1 .the-arrow.-right > .shaft:before,
  .link-1 .the-arrow.-right > .shaft:after {
	width: 8px;
	transition-delay: 0.3s;
	transition: all 0.5s;
  }
  .link-1 .the-arrow.-right > .shaft:before {
	transform: rotate(40deg);
  }
  .link-1 .the-arrow.-right > .shaft:after {
	transform: rotate(-40deg);
  }
  .link-1 .the-arrow > .shaft {
	background-color: var(--darkgreen);
	display: block;
	height: 1px;
	position: relative;
	transition: all 0.2s;
	transition-delay: 0;
	will-change: transform;
  }
  .link-1 .the-arrow > .shaft:before,
  .link-1 .the-arrow > .shaft:after {
	background-color: var(--darkgreen);
	content: "";
	display: block;
	height: 1px;
	position: absolute;
	top: 0;
	right: 0;
	transition: all 0.2s;
	transition-delay: 0;
  }
  .link-1 .the-arrow > .shaft:before {
	transform-origin: top right;
  }
  .link-1 .the-arrow > .shaft:after {
	transform-origin: bottom right;
  }

  .link-1 .animated-arrow {
	margin-top: 60px;
	display: inline-block;
	color: var(--darkgreen);
	font-size: 21px;
	text-decoration: none;
	position: relative;
	transition: all 0.2s;
  }
  .link-1 .animated-arrow:hover {
	color: var(--green);
  }
  .link-1 .animated-arrow:hover > .the-arrow.-left > .shaft {
	width: 64px;
	transition-delay: 0.1s;
	background-color: var(--green);
  }
  .link-1 .animated-arrow:hover > .the-arrow.-left > .shaft:before,
  .link-1 .animated-arrow:hover > .the-arrow.-left > .shaft:after {
	width: 8px;
	transition-delay: 0.1s;
	background-color: var(--green);
  }
  .link-1 .animated-arrow:hover > .the-arrow.-left > .shaft:before {
	transform: rotate(40deg);
  }
  .link-1 .animated-arrow:hover > .the-arrow.-left > .shaft:after {
	transform: rotate(-40deg);
  }
  .link-1 .animated-arrow:hover > .main {
	transform: translateX(80px);
  }
  .link-1 .animated-arrow:hover > .main > .the-arrow.-right > .shaft {
	width: 0;
	transform: translateX(200%);
	transition-delay: 0;
  }
  .link-1 .animated-arrow:hover > .main > .the-arrow.-right > .shaft:before,
  .link-1 .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
	width: 0;
	transition-delay: 0;
	transition: all 0.1s;
  }
  .link-1 .animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
	transform: rotate(0);
  }
  .link-1 .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
	transform: rotate(0);
  }
  .link-1 .animated-arrow > .main {
	display: flex;
	align-items: center;
	transition: all 0.2s;
  }
  .link-1 .animated-arrow > .main > .text {
	margin: 0 16px 0 0;
	line-height: 1;
  }
  .link-1 .animated-arrow > .main > .the-arrow {
	position: relative;
  }

/* -- Link: .link-02
------------------------------------ */
	.link-2 .the-arrow {
	width: 1px;
	transition: all 0.2s;
  }
  .link-2 .the-arrow.-left {
	position: absolute;
	top: 60%;
	left: 0;
  }
  .link-2 .the-arrow.-left > .shaft {
	width: 0;
	background-color: var(--darkgreen);
  }
  .link-2 .the-arrow.-left > .shaft:before,
  .link-2 .the-arrow.-left > .shaft:after {
	width: 0;
	background-color: var(--darkgreen);
  }
  .link-2 .the-arrow.-left > .shaft:before {
	transform: rotate(0);
  }
  .link-2 .the-arrow.-left > .shaft:after {
	transform: rotate(0);
  }
  .link-2 .the-arrow.-right {
	top: 3px;
  }
  .link-2 .the-arrow.-right > .shaft {
	width: 1px;
	transition-delay: 0.2s;
  }
  .link-2 .the-arrow.-right > .shaft:before,
  .link-2 .the-arrow.-right > .shaft:after {
	width: 8px;
	transition-delay: 0.3s;
	transition: all 0.5s;
  }
  .link-2 .the-arrow.-right > .shaft:before {
	transform: rotate(40deg);
  }
  .link-2 .the-arrow.-right > .shaft:after {
	transform: rotate(-40deg);
  }
  .link-2 .the-arrow > .shaft {
	background-color: var(--darkgreen);
	display: block;
	height: 1px;
	position: relative;
	transition: all 0.2s;
	transition-delay: 0;
	will-change: transform;
  }
  .link-2 .the-arrow > .shaft:before,
  .link-2 .the-arrow > .shaft:after {
	background-color: var(--darkgreen);
	content: "";
	display: block;
	height: 1px;
	position: absolute;
	top: 0;
	right: 0;
	transition: all 0.2s;
	transition-delay: 0;
  }
  .link-2 .the-arrow > .shaft:before {
	transform-origin: top right;
  }
  .link-2 .the-arrow > .shaft:after {
	transform-origin: bottom right;
  }

  .link-2 .animated-arrow {
	margin-top: 60px;
	display: inline-block;
	position: relative;
	transition: all 0.2s;
	font-size: 21px;
	color: var(--darkgreen);
  }
  .link-2 .animated-arrow:hover {
	color: var(--green);
  }
  .link-2 .animated-arrow:hover > .the-arrow.-left > .shaft {
	width: 64px;
	transition-delay: 0.1s;
	background-color: var(--green);
  }
  .link-2 .animated-arrow:hover > .the-arrow.-left > .shaft:before,
  .link-2 .animated-arrow:hover > .the-arrow.-left > .shaft:after {
	width: 8px;
	transition-delay: 0.1s;
	background-color: var(--green);
  }
  .link-2 .animated-arrow:hover > .the-arrow.-left > .shaft:before {
	transform: rotate(40deg);
  }
  .link-2 .animated-arrow:hover > .the-arrow.-left > .shaft:after {
	transform: rotate(-40deg);
  }
  .link-2 .animated-arrow:hover > .main {
	transform: translateX(17px);
	transform: translateX(80px);
  }
  .link-2 .animated-arrow:hover > .main > .the-arrow.-right > .shaft {
	width: 0;
	transform: translateX(200%);
	transition-delay: 0;
  }
  .link-2 .animated-arrow:hover > .main > .the-arrow.-right > .shaft:before,
  .link-2 .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
	width: 0;
	transition-delay: 0;
	transition: all 0.1s;
  }
  .link-2 .animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
	transform: rotate(0);
  }
  .link-2 .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
	transform: rotate(0);
  }
  .link-2 .animated-arrow > .main {
	display: flex;
	align-items: center;
	transition: all 0.2s;
  }
  .link-2 .animated-arrow > .main > .text {
	margin: 0 16px 0 0;
	line-height: 1;
  }
  .link-2 .animated-arrow > .main > .the-arrow {
	position: relative;
  }

/* ================================================
	-- Section: Default
================================================ */
.site_main {
	margin-top: 200px;
}

.ctn_txt {
	padding: 0 20px;
}

/* ================================================
	-- Header
================================================ */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100px;
	background: var(--white);
	z-index: 9999;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}

.header-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
}

/* -- Header: Logo
------------------------------------ */
#logo img {
	width: auto;
	height: 70px;
}

/* ================================================
	-- Site: Home
================================================ */
.home_01 .title-wrap {
	text-align: center;
	justify-content: center;
}

.flx {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.flx.reverse {
  flex-direction: column-reverse;
}

.flx .ctn_txt,
.flx .ctn_img {
	width: 100%;
	position: relative;
	min-height: 40vh;
}

.flx .ctn_txt {
	display: flex;
	justify-content: center;
	align-content: center;
}

.flx .ctn_txt .inner {
	padding: 100px 0;
	max-width: 500px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

.flx .ctn_txt h3,
.flx .ctn_txt p,
.flx .ctn_txt ul {
	z-index: 5;
	position: relative;
}

.flx .ctn_txt ul {
	margin-bottom: 12px;
}

ul.circle li {
	list-style-type: circle;
	padding-left: 8px;
}

.sticky-img {
	transform: scale(1);
    user-select: none;
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/* ================================================
	-- Footer: Links
================================================ */
.linksx.flx {
  flex-direction: row;
}

.linksx .img_wrapper {
	width: 50%;
	position: relative;
	min-height: 100%;
}

.linksx figure {
	position: relative;
}

.linksx figcaption {
	position: absolute;
	top: 85%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
	color: var(--grey);
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 700;
	background: rgba(0, 0, 0, 0.5);
	padding: 6px 0;
	width: 100%;
}

.linksx figure img:hover {
	border-radius: 10%;
	transition: all .4s;
  	cursor: pointer;
}


/* ================================================
	-- Footer
================================================ */
.sec-footer {
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	margin-top: 40px;
}

.sec-footer .item {
	width: 100%;
	margin-bottom: 50px;
}

.sec-footer .inner {
	width: 94%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

.sec-footer .ctn {
	width: 94%;
	margin: 0 auto;
}

.sec-footer ul {
	font-size: 18px;
}

/* -- Footer: Logo
------------------------------------ */
.sec-footer .item.footer_logo {
	text-align: center;
	justify-content: center;
	align-content: center;
	margin-bottom: 40px;
}

.sec-footer .footer_logo .inner {
	flex-direction: column-reverse;
}

.sec-footer .item.footer_logo a.logo {
	display: block;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	margin-top: 10px;
}

.helpdesk {
	border-top: 3px solid var(--green);
	border-bottom: 3px solid var(--green);
	padding: 5px 0;
	margin-bottom: 30px;
	width: 100%;
}

.helpdesk h4 {
	font-weight: 800;
	margin-bottom: 0;
	color: var(--green);
	font-size: 18px;
}

.helpdesk a {
	font-size: 32px;
}

.helpdesk a:hover {
	color: red;
}

.footer_services ul li {
	list-style-type: circle;
	padding-left: 8px;
}

.footer_services ul li a:hover {
	color: var(--darkgreen);
}

.footer_contact span {
	display: inline-block;
	width: 30px;
	font-weight: 600;
}

.footer_contact a {
	display: inline-block;
}

.footer_contact a:hover {
	color: red;
}


/* -- Footer: Contact
------------------------------------ */
#footer_meta {
	display: flex;
	flex-wrap: wrap;
}

#footer_meta .item {
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	padding: 20px 15px;
}

#footer_meta .item-1 {
	background: var(--green);
	color: #fafafa;
	font-size: 12px;
	font-weight: 500;
}
  
#footer_meta .item-2 {
	justify-content: flex-end;
}

#footer_meta .wda {
	transition: 0.3s all;
}

#footer_meta .wda i {
	font-size: 20px;
	color: #00cbff !important;
}

#footer_meta [class^="icon-"]::before,
#footer_meta [class*=" icon-"]::before {
	font-weight: 400;
}
  
#footer_meta .wda:hover {
	font-weight: 600;
	color: var(--green);
}



/* ================================================
	-- Kontakt
================================================ */
.pikettdienst {
	width: 100%;
	text-align: center;
	justify-content: center;
}

.pikettdienst .ctn_txt {
	width: 100%;
}

.pikettdienst .title-h3 {
	margin-bottom: 0;
}

.wpcf7-spinner {
	display: none !important;
}

fieldset {
	margin-top:1.5em;
	padding: 0;
}

.field-wrapp {
	margin-bottom: 10px;
}

label {
	display: block;
	font-weight: 400;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
	outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 0;
	font-size: 0.95em;
	font-weight: 400;
	width: 100%;
	height: 40px;
	padding: 5px 0;
	font-family: inherit;
	color: var(--font-p);
	background-color: transparent;
	border-bottom: 1px solid #bbb;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
	border-color: var(--green);
}

textarea {
	height: 70px;
	resize: none;
}

.submit-wrapp {
  margin-top: 40px;
}

.wpcf7 button {
	display: block;
	background: var(--darkgreen);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--white);
	border: 0;
	box-shadow: inset 0 0 0 0 var(--green);
	padding: 1.7em 2.2em;
	transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	width: 100%;
	max-width: 300px;
	cursor: pointer;
}

.wpcf7 .cf7icon {
	margin-left: 3em;
}

.cf7icon:after {
	content: " \e801";
	font-family: "isf";
}

.wpcf7 button:hover {
	color: var(--white);
	box-shadow: inset 300px 0 0 0 var(--green);
}


/* ================================================
  -- Back To Top
 ================================================ */
.back-to-top {
	position: fixed;
	text-indent: -999em;
	background: #f3f3f3
	  url(data:image/svg+xml;base64,PHN2ZyBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcuNCIgaGVpZ2h0PSIxMC44IiB2aWV3Qm94PSIwIDAgMTcuNCAxMC44Ij48c3R5bGU+LnN0MHtmaWxsOiMyQTMxMzY7fTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTIgMTAuN2w2LjctNi42IDYuNyA2LjcgMi0yLTYuNy02LjdWMmwtMi0yTDAgOC43eiIvPjwvc3ZnPg==)
	  center 50% no-repeat;
	border: 1px solid rgba(0, 0, 0, 0.75);
	border-radius: 0.1875em;
	height: 40px;
	width: 40px;
	bottom: 5em;
	right: 1em;
	opacity: 0.25;
	z-index: 3000;
}

.back-to-top:hover {
	opacity: 1;
	background-position: center 45%;
}



@media screen and (min-width: 48em){
	#logo {margin-left: 30px;}
	.flx .ctn_img {min-height: 50vh;}
}

@media screen and (min-width: 67.5em){
	body {font-size: 16px;}
	.title-h3 {font-size: 22px;}
	.flx {flex-direction: row;}
	.flx .ctn_txt, .flx .ctn_img {width: 50%;}
	.flx.reverse {flex-direction: inherit;}
	.flx .ctn_txt .inner {max-width: 400px;}
	.linksx .img_wrapper {width: 20%;}
	.item-33 {display: flex; flex-wrap: wrap;}
	.item-33 .item {width: 33%;}
	.title-h2 span {left: -60px;}
	.pikettdienst .ctn_txt {width: 100%;}	
}

@media screen and (min-width: 80em){

	.sec-footer .item.footer_logo {width: 25%;margin-bottom: 0;align-content: flex-start;}
	.sec-footer .item.footer_logo a.logo {margin-top: 0; margin-bottom: 20px;}
	.item-33 {width: 75%;}
	.sec-footer .footer_logo .inner {flex-direction: inherit;}
	.sec-footer .inner {width: 85%;}
	.helpdesk {margin-bottom: 0; margin-top: 12px;}
	.title-h5, .sec-footer ul, address p {font-size: 16px;}
}

@media screen and (min-width: 105em){
  	.title-h2 span {left: -120px;}
	.flx .ctn_txt .inner {max-width: 500px;}
	.linksx figcaption {font-size: 29px;}
}