/*
Theme Name:         Sage Starter Theme
Theme URI:          https://roots.io/sage/
Description:        Theme for Syntegris by Southvision
Version:            1.06
Author:             Southvision
Author URI:         https://southvision.de/
Text Domain:        sage
License:            MIT License
License URI:        http://opensource.org/licenses/MIT

*/

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
  pointer-events: none; 
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 0.5em 1em;
  background: #000;
  color: #fff;
  text-decoration: none;
  pointer-events: auto; 
}


/* FONTS */

/*
	Platzhalter-Schrift. Sobald die echte Schrift vorliegt:
	Font-Dateien nach assets/fonts/ legen, hier die @font-face-Regeln
	ergaenzen und nur --fontMain unten anpassen.
*/


/* VARIABLES */

:root{
	--fontMain: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--black: #202020;
	--white: #fff;
	--mint1: #04E1C0;

	--sectionPadding: 7rem;
	--radius: .8rem;
	--radiusBig: 1.6rem;
}


/* ALLGEMEIN */

*:focus {
	outline: none!important;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--fontMain);
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--black);
	background-color: var(--white);
}

p{
	margin-top: 0;
	margin-bottom: 1.6rem;
}

p:last-child{
	margin-bottom: 0;
}

section{
	padding-top: var(--sectionPadding);
	padding-bottom: var(--sectionPadding);
}

img, video {
	width: 100%;
	height: auto;
	display: block;
}

section .textWrap img {
	width: revert-layer;
}

iframe {
	width: 100%;
	display: block;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin-top: 0;
	line-height: 1.25;
}

h1, .h1 {
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 2.4rem;
}

h2, .h2 {
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 2.4rem;
}

h3, .h3 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
}

h4, .h4 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

h5, .h5 {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

h6, .h6 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

ul, ol {
	margin-top: 0;
	margin-bottom: 1.6rem;
	padding-left: 2rem;
}

li {
	margin-bottom: .6rem;
}

a{
	color: var(--mint1);
	text-decoration: none;
	-webkit-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

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

.bgHelper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.bgHelper video,
.bgHelper img {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.flexRow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	margin-right: -1.5rem;
    margin-left: -1.5rem;
}

.flexWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.justCenter {
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.justBetween {
	-webkit-box-pack: space-between;
	    -ms-flex-pack: space-between;
	        justify-content: space-between;
}

.alignConCenter {
	-ms-flex-line-pack: center;
	    align-content: center;
}

.alignItemsCenter {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.alignItemsEnd {
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
}

.text-center{
	text-align: center;
}

.text-left{
	text-align: left;
}

.text-right{
	text-align: right;
}

.padTo3 {
	padding-top: 3rem;
}

.maTo3 {
	margin-top: 3rem;
}

.maTo6 {
	margin-top: 6rem;
}

.ctaBtn {
	padding: 1.3rem 3.2rem;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	display: inline-block;
	text-align: center;
	position: relative;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 100px;
	border: 1px solid var(--mint1);
	background-color: transparent;
	color: var(--mint1);
	-webkit-transition: background .3s ease, color .3s ease, border-color .3s ease;
	-o-transition: background .3s ease, color .3s ease, border-color .3s ease;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.ctaBtn:hover {
	background-color: var(--mint1);
	border-color: var(--mint1);
	color: var(--white);
}

.textWrap .ctaBtn {
	margin-top: 1.5rem;
}

legend {
	border: none;
}

@media (min-width: 992px) {	
	.order1md {
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}
	
	.order2md {
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.order3md {
		-webkit-box-ordinal-group: 4;
		    -ms-flex-order: 3;
		        order: 3;
	}
	
	.order4md {
		-webkit-box-ordinal-group: 5;
		    -ms-flex-order: 4;
		        order: 4;
	}
}

@media (max-width: 1199px){	
	.maToMD3 {
		margin-top: 3rem;
	}	
	
	.maToMD6 {
		margin-top: 6rem;
	}	
}

@media (max-width: 991px){	

	.maToSM3 {
		margin-top: 3rem;
	}	
	
	.maToSM6 {
		margin-top: 6rem;
	}	
}

@media (min-width: 768px) and (max-width: 991px){	
	html {
		font-size: 9px;
	}

	.order1sm {
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}
	
	.order2sm {
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.order3sm {
		-webkit-box-ordinal-group: 4;
		    -ms-flex-order: 3;
		        order: 3;
	}
	
	.order4sm {
		-webkit-box-ordinal-group: 5;
		    -ms-flex-order: 4;
		        order: 4;
	}
}

@media (max-width: 767px){
	html {
		font-size: 8px;
	}
	
	.maToXS3 {
		margin-top: 3rem;
	}	
	
	.maToXS6 {
		margin-top: 6rem;
	}	
	
	.order1xs {
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}
	
	.order2xs {
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.order3xs {
		-webkit-box-ordinal-group: 4;
		    -ms-flex-order: 3;
		        order: 3;
	}
	
	.order4xs {
		-webkit-box-ordinal-group: 5;
		    -ms-flex-order: 4;
		        order: 4;
	}
}


/* HINTERGRUNDVARIANTEN */

section.dark {
	background-color: var(--black);
	color: var(--white);
}

section.dark h1,
section.dark h2,
section.dark h3,
section.dark h4,
section.dark h5,
section.dark h6 {
	color: var(--white);
}

section.light {
	background-color: var(--white);
}

section.mint {
	background-color: var(--mint1);
	color: var(--black);
}

section.mint h1,
section.mint h2,
section.mint h3,
section.mint h4,
section.mint h5,
section.mint h6 {
	color: var(--black);
}

section.mint a {
	color: var(--black);
}

section.mint a:hover {
	color: var(--white);
}

section.mint .ctaBtn {
	color: var(--black);
	border-color: var(--black);
}

section.mint .ctaBtn:hover {
	background-color: var(--black);
	border-color: var(--black);
	color: var(--white);
}


/* TEAM CARD */

.teamCard {
	text-align: center;
}

.teamCard .teamCardName {
	font-size: 2rem;
	font-weight: 700;
	color: var(--mint1);
}

.teamCard .teamCardPosition {
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

.teamCard .teamCardContact {
	font-size: 1.6rem;
	line-height: 1.5;
}

.teamCard .teamCardContact a {
	color: var(--black);
}

.teamCard .teamCardContact a:hover {
	color: var(--mint1);
}

.teamCard .teamCardMail a {
	text-decoration: underline;
}

section.dark .teamCard .teamCardContact a {
	color: var(--white);
}

section.dark .teamCard .teamCardContact a:hover {
	color: var(--mint1);
}

section.mint .teamCard .teamCardName {
	color: var(--black);
}

section.mint .teamCard .teamCardContact a:hover {
	color: var(--white);
}


/* FOOTER */

footer.content-info {
	background-color: var(--mint1);
	color: var(--black);
	padding-top: var(--sectionPadding);
	padding-bottom: var(--sectionPadding);
	text-align: center;
}

footer.content-info .footerHeadlineWrap {
	margin-bottom: 4rem;
}

footer.content-info .footerHeadlineWrap h1,
footer.content-info .footerHeadlineWrap h2,
footer.content-info .footerHeadlineWrap h3 {
	margin-bottom: 0;
	color: var(--black);
}

footer.content-info .contactBlockWrap {
	margin-bottom: 2.5rem;
}

footer.content-info .contactBlockWrap:last-of-type {
	margin-bottom: 0;
}

footer.content-info .contactLabel {
	font-weight: 700;
	margin-bottom: .2rem;
}

footer.content-info a {
	color: var(--black);
}

footer.content-info a:hover {
	color: var(--white);
}

footer.content-info .socialMediaWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 1.6rem;
	margin-top: 4rem;
}

footer.content-info .socialMediaWrap .socialIconWrap {
	width: 2.6rem;
}

footer.content-info .subfooterWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 1rem 2.4rem;
	margin-top: 5rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(32,32,32,.15);
	font-size: 1.4rem;
}


/* 1920px+ Auflösungen */


@media(min-width: 2400px){
	html{
		font-size: 12.5px;
	}
	.container {
		width: calc(1320px * 1.25);
	}
}

@media(min-width: 2880px){
	html{
		font-size: 15px;
	}
	.container {
		width: calc(1320px * 1.5);
	}
}

@media(min-width: 3360px){
	html{
		font-size: 17.5px;
	}
	.container {
		width: calc(1320px * 1.75);
	}
}

@media(min-width: 3840px){
	html{
		font-size: 20px;
	}
	.container {
		width: calc(1320px * 2);
	}
}