/*
Theme Name: asekarriere
Theme URI: karriere.ase-kaarst.de
Author: pure media solutions GmbH
Author URI: http://karriere.ase-kaarst.de
Description: 
Version: 1.0.0
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karriere.ase-kaarst.de
*/

/* figtree-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/figtree-v9-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/figtree-v9-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/figtree-v9-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/figtree-v9-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/figtree-v9-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* ---------- GLOBAL ---------- */
:root {
	--color-primary: #0069b4;
	--color-primary-light: #a6cde9;
	--color-primary-lighter: #c7dbf1;
	--color-secondary: #343f47;
	--color-accent-light: #f7b857;
	--color-text: #5E6A73;
	--color-headline: #343F47;
	--color-grey: #9D9D9C;
}

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

body {
	font-family: 'Figtree', system-ui;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

.container {
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

.d-flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.align-items-center {
  align-items: center;
}
.column-gap-5 {
  column-gap: 3rem;
}
.row-gap-4 {
  row-gap: 1.5rem;
}
.gap-2 {
  gap: 0.5rem;
}

b,
strong {
	font-weight: 700
}

p {
	margin-bottom: 1.5rem
}

a {
	color: var(--color-primary);
}

.elementor-button {
	background: var(--color-primary) !important;
	border: 2px solid var(--color-primary) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	text-decoration: none;
}
.elementor-button:hover {
	background: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	color: var(--color-primary-light) !important;
}

.btn-primary-outline .elementor-button {
	background: transparent !important;
	color: var(--color-primary) !important;
}
.btn-primary-outline .elementor-button:hover {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: #fff !important;
}
.btn-light .elementor-button {
	background: var(--color-primary-light) !important;
	border-color: var(--color-primary-light) !important;
	color: var(--color-secondary) !important;
}
.btn-light .elementor-button:hover {
	background: var(--color-accent-light) !important;
	border-color: var(--color-accent-light) !important;
	color: var(--color-secondary) !important;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-headline) !important;
	font-weight: 700 !important;
}
h1.category-title,
.category-title.h1 {
  font-size:clamp(34px, calc(30px + 1.8vw), 64px);
  line-height:normal
}
h1.category-title-smaller,
.category-title-smaller.h1 {
  font-size:clamp(32px, calc(30px + 1.8vw), 50px);
  line-height:normal
}
h2,
.h2 {
  font-size:clamp(28px, calc(18px + 1.2vw), 34px);
  margin-bottom:5px
}
h3,
.h3 {
  font-size:26px;
  font-weight:600
}

.text-dark {
  color:var(--color-headline) !important;
}
.text-white,
.text-white *{
  color:#fff !important
}
.text-primary {
  color:var(--color-primary) !important;
}
.text-primary-lighter {
  color:var(--color-primary-lighter) !important;
}

.subheadline {
  font-size:20px;
  color:var(--color-primary);
  font-weight:600
}
.label-headline {
  background:var(--color-grey);
  color:#fff;
  font-size:22px;
  font-weight:700;
  padding:0 10px
}

.info-box {
  color:var(--color-headline);
  border-radius:6px;
  padding:15px 25px
}
.info-box b,
.info-box strong {
  font-size:18px
}
.info-box p:has(b),
.info-box p:has(strong) {
  margin-bottom:10px
}

.statistic-figure {
  font-size:21px;
  color:var(--color-headline);
}
.statistic-label {
  color:var(--color-primary);
}

.light-shadow-box {
  border-radius:3px;
  background:#F5F5F5;
  box-shadow:10px 10px 25px 0 rgba(0, 0, 0, 0.2);
  padding:35px 25px;
  height:100%;
}
.light-shadow-box p {
  margin-bottom:5px
}
.light-shadow-box strong,
.light-shadow-box b {
  font-size:20px;
  font-weight:600;
  color:var(--color-headline);
  transition:0.2s ease-in-out
}
.light-shadow-box:has(> .box-link-overlay) {
  position:relative;
  transition:0.2s ease-in-out
}
.light-shadow-box:has(> .box-link-overlay:hover) {
  box-shadow:15px 15px 25px 0 rgba(0, 0, 0, 0.5)
}

.job-description-box {
  background:#F5F5F5;
  border-radius:5px;
  padding:15px 25px 25px 25px;
  height:100%;
  text-align:center
}
@media (min-width:768px) {
  .job-description-box {
    text-align:left
  }
}
.job-description-box b,
.job-description-box strong {
  color:#343F47;
  font-size:18px;
  font-weight:600
}

.count-number {
  font-size:40px;
  color:var(--color-primary-light);
  font-weight:700;
  transition:0.2s ease-in-out
}

.faq-item {
  border-radius:3px;
  background:#F5F5F5;
  box-shadow:1px 1px 5px 0 rgba(0, 0, 0, 0.2);
  padding:25px;
  margin-bottom:15px
}
.faq-item .faq-question {
  color:var(--color-headline);
  font-size:18px;
  font-weight:400
}

img ~ figcaption {
	background: var(--color-primary);
	color: #fff !important;
	display: inline-block;
	position: absolute;
	right: 0;
	font-size: 18px;
	font-weight: 700 !important;
	padding: 10px 20px;
	border-radius: 3px;
	bottom: -20px;
}

.cta-banner{
	box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.15);
}
.cta-banner h2{
	color: var(--color-primary-light) !important;
}
.cta-banner b,
.cta-banner strong {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.bg-left-border-light-dark {
  position:relative
}
.bg-left-border-light-dark .e-con-inner::before,
.bg-left-border-light-dark .e-con-inner::after {
  content:"";
  width:50%;
  height:100%;
  position:absolute;
  display:block;
  background:#d3d2d2;
  left:0;
  top:0;
  z-index:-1
}
.bg-left-border-light-dark .e-con-inner::after {
  right:0;
  left:unset;
  background:#676f75
}

ul.check-list {
  margin-bottom:0;
  padding-left:0;
  list-style:none
}
ul.check-list li {
  padding-left:40px;
  margin-bottom:35px;
  background:url(icons/check-list-point.svg) no-repeat left top 2px / 25px
}
ul.square-list {
  margin-bottom:0;
  padding-left:0;
  list-style:none
}
ul.square-list li {
  padding-left:20px;
  margin-bottom:15px;
  background:url(icons/list-point.svg) no-repeat left top 8px / 8px
}

.step-count {
  display: flex;
  margin-bottom: 40px;
  gap: 20px;
}
.step-count b, .step-count strong {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 17px;
}
.step-count-number {
  color:var(--color-primary);
  border:2px solid var(--color-primary);
  border-radius:50%;
  padding:7px;
  width:65px;
  height:65px;
  text-align:center;
  font-size:32px
}

input.elementor-field[type="text"],
input.elementor-field[type="email"],
input.elementor-field[type="tel"],
textarea.elementor-field {
	background: #d0d0cf !important;
	border-radius:  5px !important;
	border-color: #9D9D9C !important;
}
input.elementor-field[type="file"] {
	background: transparent !important;
}
::placeholder {
	color: var(--color-headline) !important;
}

/* ---------- HEADER ---------- */
header {
	margin-bottom: 20px;
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);
	padding: 10px;
}
header img {
	max-width: 100%;
}
.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav #menu-header {
  display: flex;
  align-items: center;
  gap: 35px;
  list-style: none;
  font-size: 20px;
  font-weight: 600;
}
nav #menu-header a {
	text-decoration: none;
	color: var(--color-headline);
}
@media (max-width: 1100px) {
	header nav {
		display: none;
	}
}
@media (max-width: 675px) {
	.header-wrapper {
		justify-content: center;
	}
	header .company-btn {
		display: none;
	}
}

/* ---------- FOOTER ---------- */
.footer-main, .footer-copyright {
	background: var(--color-secondary);
	color: #fff;
}

.footer-cols-wrapper {
	display: flex;
	gap: 25px;
	border-bottom: 1px solid #fff;
	padding-top: 40px;
	padding-bottom: 20px;
}
@media (max-width: 650px) {
	.footer-cols-wrapper {
		flex-direction: column;
	}
}
.footer-col {
	flex-basis: 50%;
}

.footer-headline {
	font-size: 26px;
	margin-bottom: 25px;
	font-weight: 700;
}

.footer-copyright {
	text-align: center;
	padding: 25px;
}

#menu-footer-links a {
	color: #fff;
	text-decoration: none;
}
ul#menu-footer-links {
  list-style: none;
}
ul#menu-footer-links li {
  padding-left: 20px;
  margin-bottom: 15px;
  background: url(icons/list-point.svg) no-repeat left top 8px / 8px;
}