/* Jasmin Dolati */

/* Include Fonts */


@font-face {
  font-family: 'Atolos Sans';
  src: url('../fonts/atolos/Atolos-Variable.woff2') format('woff2'),
       url('../fonts/atolos/Atolos-Variable.woff') format('woff'),
       url('../fonts/atolos/Atolos-Variable.ttf') format('truetype');
       font-weight: 300 900;
       font-display: swap;
       font-style: normal;
}

@font-face {
  font-family: 'Sweet Sans';
  src: url('../fonts/sweet/SweetSans-Regular.woff') format('woff2'),
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}



/* Style Definitions */

:root {	
	--font-family: 'Atolos Sans', sans-serif;
	--heading-font-family: 'Atolos Sans', sans-serif;
	--base-font-size: 19px;
	--base-font-weight: 400;
	--base-line-height: 1.6;
	
	--h1-font-size: 2.7rem; /* 2.5 ohne Screenshots */
	--h1-line-height: 1.25;
	--h1-font-weight: 700;
	--h2-font-size: 2rem;
	--h2-line-height: 1.35;
	--h2-font-weight: 700; /* geändert */
	--h3-font-size: 1.6rem;
	--h3-line-height: 1.375;
	--h3-font-weight: 700; /* geändert */
	--h4-font-size: 1.3rem;
	--h4-line-height: 1.4;
	--h4-font-weight: 700; /* geändert */
	--h5-font-size: 1.2rem;
	--h5-line-height: 1.425;
	--h5-font-weight: 600; /* geändert */
	--h6-font-size: 1.1rem;
	--h6-line-height: 1.475;
	--h6-font-weight: 600; /* geändert */
	
	/* Lines and Boders */
	--border-width: 0px; /* for <hr> and UK Buttons, Underline, Nav and Burger Icon Lines */
	--underline-stroke: var(--border-width);
	
	/* Cards */
	--cards-gap: 2rem;
	--cards-radius: 0; /* geändert */
	
	/*Colors */
	--color-page-bg: #FFFFFF; /* #0F2532; */
	--color-amber: #FEAE00; 
	
	--color-page-text: #222222;
	--color-page-bg: #FFFFFF;
	--color-page-border: #000000;
	--color-navbar-text: #888888; /* var(--color-link); */
	--color-navbar-bg: rgba(255,255,255,1);
	--color-nav-mobile-bg: white;
	--color-navbar-border: #000000;
	--color-code-bg: #F3F2F1;
	--color-card-text: #000000;
	--color-card-bg: #FCFBFA;
	--color-card-border: #F3F2F1;
	--color-navbar-text-hero: var(--color-navbar-text); /* inverted nav color for BG image */
	--color-link: #32BEBE; /* #67C9CA; */
	--color-error: #EB003C;
	--color-success: #5CCE33;
	--color-label: var(--color-link);
	
	/* Gaps and Margins */
	--am-flex-min-block-width: 260px; /* Nicht ändern! Bei mehr Breite keine 4 x 1/4 Blocks möglich */
	--am-block-max-width: 1000px;
	--am-container-padding: 1.75rem;
	--am-block-margin-top: 1.5em;
	
	/* Navigation */
	--logo-width: 300px;
	--logo-font-size: 1em;
	--logo-padding-top: 20px;
	--navbar-toggle-weight: var(--border-width);
	
	/* Footer */
	--color-footer-background: var(--color-page-bg);
	--color-footer-border: #DDD;
	--color-footer-text: var(--color-page-text);
	
	/* Forms */
  --am-input-margin: 0.5rem 0;
  --am-input-padding: 0.6rem 1rem;
  --am-input-color: inherit;
  --am-input-placeholder-color: #999;
  --am-input-background: #F2F2F2;
  --am-input-border-radius: var(--cards-radius);
  --am-input-border: var(--border-width) solid black;
  --am-input-hover-color: var(--am-input-color);
  --am-input-hover-background: var(--am-input-background);
  --am-input-hover-border: var(--am-input-border);
  --am-input-focus-color: var(--am-input-color);
  --am-input-focus-background: var(--am-input-background);
  --am-input-focus-border: var(--border-width) solid #222222;

	/* Buttons */
  --am-button-margin: 0.5rem;
  --am-button-padding-vertical: 0.5rem;
  --am-button-padding-horizontal: 1.3rem; /* 1rem; */
  --am-button-font-size: inherit;
  --am-button-lineheight: 1.6;
  --am-button-border-radius: var(--cards-radius); /* 3px 40px; /* 0.4rem; */
  --am-button-color: var(--color-link); /* Gold #A2906D; */
  --am-button-background: inherit;
  --am-button-border-width: 0;
  --am-button-border-color: var(--color-link);
  --am-button-hover-color: var(--color-link);
  --am-button-hover-background: rgba(255,255,255,0.2);
  --am-button-hover-border-color: var(--color-link);

	/* Gallery */
  --am-gallery-gap: 2px;
  --am-gallery-item-width: 200px;
  --am-gallery-z-index: 9999;
  --am-gallery-max-height: 100%;
  --am-gallery-max-width: 100%;
  --am-gallery-background: rgba(0, 0, 0, 0.2);
  --am-gallery-controls-color: #FFFFFF;
  --am-gallery-controls-background: rgba(0, 0, 0, 0.1);
  --am-slider-controls-color: #FFFFFF;
  --am-slider-controls-background: rgba(0, 0, 0, 0.1);
	
}



/* Logo and Navigation */


.uk-navbar-brand svg {
	color: var(--navbar-text);
	transition: all 0.3s;
}

.uk-navbar-brand:hover svg {
	color: var(--color-link);
	transition: all 0.3s;
}

.uk-navbar-brand {
	font-family: "Sweet Sans";
	font-weight: 400 !important; 
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(125,125,125,0.5) !important;
}


/* Hide Burger Icon on Desktop */
@media only screen and (min-width: 1020px) {
	.navbar-toggle {
		display: none;
	}
}


/* Disable Mobile Subnav  */
.uk-nav.uk-nav-side .uk-nav {
	display: none;
}

/* Disable Search field and Language switch */
.uk-autocomplete.uk-width-1-1 {
	display: none;
}
.language {
	display: none;
}


/* Navigation with buttons */


@media only screen and (max-width: 1020px) {
	.navbar { height: 68px; }
}

@media only screen and (min-width: 1020px) {
	.navbar { height: 75px; }
}

.uk-navbar-nav>li a {
	padding: 4px 15px !important;
	margin-top: 15px;
	line-height: 1.8em;
	height: auto;
	border-radius: 5px;
	transition: 0.3s;
}

.uk-navbar-nav>li:hover {
	background: none !important;
	border-bottom: none !important;
}

.uk-navbar-nav>li:hover a {
	background: rgba(0,0,0,0.05);
	transition: 0.3s;
}


/* Language / Dropdown for languag switch */

.language { padding-right: 0 !important; }
.language a { margin-top: 13px !important; }
.language a:hover { /* background-color: transparent !important; background: none !important; opacity: 0.8; */ }
.language img { width: 24px; height: 24px; border-radius: 50px; }

.uk-dropdown {
	width: 120px;
}
.uk-dropdown-navbar {
	border: none;
	background-color: white !important;
}
.uk-dropdown-navbar>.uk-nav-navbar>li a {
	font-size: 80%;
	margin-top: 0 !important;
	font-weight: 500;
	background-color: white !important;
}
.uk-dropdown-navbar>.uk-nav-navbar>li>a:hover {
	background-color: #F3F2F1 !important;
}



/* Action Button */
.uk-navbar-nav>li:nth-of-type(1) a {
	background: var(--color-page-bg);
	color: white !important;
	margin-right: 5px;
}
.uk-navbar-nav>li:nth-of-type(1) a:hover {
	background: rgba(0,0,0,0.05);
	color: var(--color-page-bg) !important;
	margin-right: 5px;
}

.uk-nav-side>li:nth-of-type(1) a {}
.uk-nav-side>li:nth-of-type(1) a:hover {}




/* Hero */


.hero video { object-fit:cover !important;width:100vw; height:100vh;position:absolute;top:0;left:0; } 
.hero am-raw div { background-color: rgba(0,0,0,0.4);color:#EEE; width:100vw; height:100vh;position: absolute;top:0;left:0; }
.hero am-raw div h1 { padding-top:50vh !important;padding-left:10%; }
.hero am-raw div p { padding-left:10%;max-width:500px;width:50%; } 

		
.fullheight h1 {
	padding-top: 1rem !important;
	margin-top: 0;
}

/* Desktop */
@media only screen and (min-width: 1024px) {
	.hero am-raw {
		padding-top: 17vh;
	}
	.fullheight h1, .fullheight h2, .fullheight .hero-title {
		font-size: 2.8em; /* Freie Berufe: 3em */
		line-height: 1.2;
	}
}

/* Tablet */
@media only screen and (min-width: 600px) and (max-width: 1024px) {
	/* am-flex>am-1-3  { flex-basis: 50% !important; } */
	.hero am-raw { padding-top: 8rem !important; }
	.fullheight h1, .fullheight .hero h2, .fullheight .hero-title {
		font-size: 2.2em;
	}
	.hc4-block { max-width: 400px; }
	.how-it-works img { min-width: auto !important; }
	.hc4-text-component { max-width: 450px; }
}

/* Mobile */
@media only screen and (max-width: 600px) {
	.fullheight h1 { padding-top: 10px !important; }
	.hero am-raw { padding-top: 1.5rem; } /* 5rem w/o Image */
	.pricing am-1-3:nth-of-type(3) { margin-top: 1rem; }
	.hc4-block { max-width: 400px; }
	.how-it-works img { min-width: auto !important; }
	.hc4-text-component { max-width: 450px; }
	.rating { display: none; }
}





/* Rating */
.rating svg {
	height: 1.1em;
	margin-top: -.15em!important;
	margin: 0;
	vertical-align: middle;
	width: 1.1em;
}

.wprm-rating-star.wprm-rating-star-full svg * {
	fill: #f08436;
}

.wprm-rating-star.wprm-rating-star-66 svg * {
	fill: url(#wprm-recipe-user-rating-0-66);
}



.problem {
	background-position: 95% bottom;
	background-repeat: no-repeat;
	background-size: 230px;
}

@media only screen and (max-width: 770px) {
	.problem { padding-bottom: 220px !important; background-size: 200px; }
}

.loesung {
	background-position: 7% bottom;
	background-repeat: no-repeat;
	background-size: 190px;
}

@media only screen and (max-width: 770px) {
	.loesung { padding-bottom: 220px !important; background-size: 200px; }
}

.demo {
	background-position: 95% bottom;
	background-repeat: no-repeat;
	background-size: 170px;
	max-width: 800px;
}

@media only screen and (max-width: 600px) {
	.demo { padding-bottom: 180px !important; background-size: 180px; }
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
	.demo am-flex>am-1-4 { flex-basis: 100% !important; }
}

@media only screen and (min-width: 770px) {
	.demo { padding-left: 15px !important; }
	.demo h3 { font-weight: 700; }
}

.demo span { background: var(--color-page-bg); color: var(--color-page-bg); font-size: 18px; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; vertical-align: 4px; letter-spacing: 0.02em; }


@media only screen and (min-width: 70px) {
	.demo am-buttons a {
		background-image: url('/shared/icons8-calendar-96.png');
		background-size: 23px;
		background-position-x: 18px;
		background-position-y: 13px;
		background-repeat: no-repeat;
		padding-left: 50px;
	}
}


@media only screen and (max-width: 600px) {
	.hero { padding-left: 0; }
}


/* WhatsApp */
@media only screen and (min-width: 600px) {
	#whatsapp { display: none; }
}


/* CTA */

.cta am-buttons a {
	background-image: url('/shared/icons8-calendar-96.png');
	background-size: 23px;
	background-position-x: 18px;
	background-position-y: 13px;
	background-repeat: no-repeat;
	padding-left: 50px;
}

.cta am-buttons {
	background-image: url('/shared/cta-arrow.jpg');
	background-size: 160px;
	background-position-x: 25%;
	background-position-y: 0px;
	background-repeat: no-repeat;
	padding-top: 20px;
	padding-bottom: 20px;
}

@media only screen and (max-width: 600px) {
	.cta am-buttons {
		background-size: 120px;
		background-position-x: 0;
		background-position-y: 0px;
		background-repeat: no-repeat;
		padding-top: 8px;
		padding-bottom: 20px;
	}
	.cta am-buttons a {
		margin-left: 35%;
	}
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
	.cta am-buttons {
		background-size: 160px;
		background-position-x: 25%;
		background-position-y: 0px;
		background-repeat: no-repeat;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.cta am-buttons a {
		margin-left: 25%;
	}
}



/* Lead */

.lead p {
	text-align: center;
	color: var(--color-link);
	line-height: 1.4;
}

.lead h2 {
	text-align: center;
	color: inherit;
	font-weight: 700;
	margin-top: 12px !important;
}

@media only screen and (max-width: 770px) {
	.lead p  {font-size: 1.1em; }
	.lead h2 {font-size: 1.6em; padding: 0 1em; }
}

@media only screen and (min-width: 770px) {
	.lead p  {font-size: 1.4em; }
	.lead h2 {font-size: 2.2em; }
}


.uk-link, a { color: var(--color-link); }
.uk-link:hover, a:hover { color: var(--color-link); }



/* Headlines */

@media only screen and (max-width: 350px) {
	.hero h1 { font-size: 1.6em; }
	.hero p { font-size: 1em; font-weight: 500; margin-top: 10px !important; }
	.hero .mobile { width: 90vw; padding-bottom: 10px; }
	.hero .am-button:nth-of-type(2) { display: none; }
	am-buttons { margin-top: 1rem !important; }
}
@media only screen and (min-width: 350px) and (max-width: 400px) {
	.hero h1 { font-size: 2.0em; }
	.hero p { font-size: 1em; font-weight: 500; margin-top: 10px !important; }
	.hero .mobile { width: 90vw; padding-bottom: 10px; }
	.hero .am-button:nth-of-type(2) { display: none; }
	am-buttons { margin-top: 1rem !important; }
}
@media only screen and (min-width: 400px) and (max-width: 600px) {
	.hero h1 { font-size: 2.0em; } /* 2.4rem w/o image */
	.hero p { font-size: 1em; font-weight: 500; margin-top: 10px !important; }
	.hero .mobile { width: 90vw; padding-bottom: 15px; }
	.hero .am-button:nth-of-type(2) { display: none; }
	am-buttons { margin-top: 1rem !important; }
}

@media only screen and (min-width: 600px) and (max-width: 770px) {
	.hero h1 { font-size: 2.0em; }
	.hero p { font-size: 1.4em; font-weight: 500; }
}

@media only screen and (min-width: 770px) {
	.hero p { font-size: 1.4em; font-weight: 500; }
	.hero .mobile { display:none; }
}


.hero h1 span {
	font-weight: 400;
	font-size: 95%;
}


/* Quote */

blockquote {
	font-style: normal;
	font-size: 1.8rem !important;
	font-weight: 300;
	text-align: center;
}

blockquote::before {
	content: '»' !important;
}

blockquote::after {
	content: '«' !important;
}


figcaption::before {
	content: '';
}



/* Cases */

.cases am-1-3 { margin-top: 20px; }
.cases h4 { margin-top: 10px !important; font-size: 1.1em; }
.cases h4+p { margin-top: 5px !important; font-size: 90%; line-height: 1.4; }
.cases am-1-3 p a { 
	padding-right: 22px;
	border-bottom: none !important; 
	background-image: url('/shared/arrow-link.svg');
	background-position: right bottom;
	background-repeat: no-repeat;
}







.highlight-container, .highlight {
  position: relative;
}

.highlight-container {
  display: inline-block;
}
.highlight-container:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: transparent; 
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}

u {
	text-decoration: none;
	border-bottom: 2px solid #B4A58B;
}


/* Footer */
footer { font-size: 90%; }





/* Buttons */

	

	
	@media only screen and (min-width: 770px) {
			.hero p {
				font-size: 1em !important;
			}
		}

	.am-button{
		color: white;
		background-color: var(--color-link);
		margin: 0 0 6px 0;
		transition: all 0.3s;
		box-shadow: 0 6px 0px 0 #268792;
	}
	.am-button:hover:hover {
		color: white;
		background-color: var(--color-link);
		margin: 6px 0 0 0;
		transition: all 0.3s;
		box-shadow: 0 0px 0px 0 #268792;
	}
	
	
	main a {
		border-bottom: 1px solid transparent;
		transition: all 0.2s;
	}
	
	main a:hover {
		border-bottom: 2px solid var(--color-link);
		border-color: var(--color-link) !important;
		transition: all 0.2s;
	}



/* Date */
.text-subtitle {
	font-weight: 400;
	font-size: 16px;
	/* color: #AAA; */
}

.text-subtitle p.am-block:nth-child(2){
	margin-top: 0 !important;
}

.tags a {
	background: #F3F2F1;
	color: #999;
	border-radius: 3px;
	padding: 0px 6px !important;
	font-size: 16px;
	font-weight: 400;
}

.nav-link.panel-more {
	font-weight: 400;
}




/* Portrait */

.portrait {
	background: white;
	padding: 2rem 2rem 3rem 2rem;
	border-radius: 10px;
	/* --am-flex-gap: 3rem; */
}

.portrait img {
	border-radius: 100%;
	justify-content: center;
	filter: none !important;
}

@media only screen and (max-width: 770px) {
	.portrait am-1-4, .portrait am-1-3 {
		margin: auto;
	}
	.portrait h5 {
		text-align: center !important;
	}
}



.portrait am-list {
	margin-top: 1em;
}



.portrait h5:nth-of-type(2) {
	margin-top: 4em;
}

.portrait ul {
  list-style: none;
	padding-left: 1.6em;
}

.portrait ul li {
  text-indent: -1.6em;
}

.portrait ul li:before {
  content: '✔︎   ';
	
}





/* Label */


.label, .has-label p:nth-child(1) {
	font-size: 0.9em;
	color: var(--color-page-bg);
}


/* FAQ Q&A Accordion */


.accordion {
  width: 95%;
  background: white;
  border-radius: 10px;
  font-weight: 600;
  padding: 26px 26px 24px 26px;
}

.accordion.active {
	color: var(--color-page-text) !important;
	font-weight: 600 !important;
}

.panel {
  width: 95%;
  max-width: 95% !important;
  margin-top: -20px;
  background: white;
  border-radius: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding-left: 26px;
  padding-right: 26px;
  padding-top: 20px;
}

.panel p { padding-right: 40px;}

.accordion:after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: var(--color-page-text);
  float: right;
  margin-left: 5px;
  margin-top: -5px;
}

.accordion.active:after {
	content: "–";
	font-size: 15px;
	font-weight: 900;
	margin-top: 3px;
}

@media only screen and (max-width: 600px) {
	.accordion {
		width: 85%;
		line-height: 1.4em;
	}
	.accordion:after {
		content: '';
	}
	.accordion.active:after {
		content: '';
	}
	.panel {
		width: 85%;
		max-width: 85% !important;
		margin-bottom: 15px;
	}
	.panel p { 
		padding-right: 0px;
		line-height: 1.4em; 
	}
	
}

/* Timeline */

.timeline .timeline-item { padding-bottom: 1em; }
.timeline ul { margin: 0 0 0 -1.03em; list-style-type: none; }
.timeline li { padding-left: 1.03em; }
.timeline .timeline-item .timeline-marker { top: 1.5rem; }
.content li+li { margin-top: .5em; }
.timeline li.point { list-style-type: disc; }