@charset "utf-8";
/* CSS Document */

/* dosis-200 - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/dosis-v18-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/dosis-v18-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dosis-v18-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dosis-v18-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dosis-v18-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dosis-v18-latin-200.svg#Dosis') format('svg'); /* Legacy iOS */
}
/* dosis-300 - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/dosis-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/dosis-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dosis-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dosis-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dosis-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dosis-v18-latin-300.svg#Dosis') format('svg'); /* Legacy iOS */
}
/* dosis-regular - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: 
	  url("../fonts/dosis-v18-latin/dosis-v18-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/dosis-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dosis-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dosis-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dosis-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dosis-v18-latin-regular.svg#Dosis') format('svg'); /* Legacy iOS */
}
/* dosis-700 - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/dosis-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/dosis-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dosis-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dosis-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dosis-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dosis-v18-latin-700.svg#Dosis') format('svg'); /* Legacy iOS */
}
/* dosis-800 - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/dosis-v18-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/dosis-v18-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dosis-v18-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dosis-v18-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dosis-v18-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dosis-v18-latin-800.svg#Dosis') format('svg'); /* Legacy iOS */
}

html {
	font-size: 1rem;
	scroll-behavior: smooth;
}
body{ 
  font-size: 1rem;
  font-family: 'Dosis', sans-serif;
  background-color: white;
}

#toTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #07ea72;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#toTopBtn:hover {
  background-color: #555;
}


.backtosite{
	list-style-type: none;
	padding-left: 0px;
	margin-top: 1rem;
	margin-bottom: 0px;
}
.backtosite a{
	text-decoration: none;
}

.container{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	max-width: 68.75rem;
	margin: 0 auto;
}
.button{
	padding: 0.25rem 1rem;
	background-color: rgb(50,50,50);
	color: white;
	text-decoration: none;
	border: 1px solid white;
	border-radius: 9999px;
	cursor: pointer;
}

.button--primary {
  color: black;
  background-color: #07ea72;
}

.button--primary:hover{
	text-decoration: underline;
	background-color: #00ac3a;
}
.button--secondary {
  background-color: #2d9490;
}
.button--secondary:hover{
	background-color: #006964;
	text-decoration: underline;
}
.page-navigation{
	padding-top: 1rem;
	background-color: white;
}
.page-navigation__logo{
	height: 4rem;
	margin-top: 1rem;
}
.page-navigation__buttons-list{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	list-style-type: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
		-ms-flex-pack: end;
			 justify-content: flex-end;
	margin-top: 1rem;
}
.page-navigation__button{
	border: 1px solid black;
	border-radius: 999px;
	padding: 0px;
	text-decoration: none;
	color: black;
	text-align: center;
	display: inline-block;
	height: 2rem;
	margin-left: 0.5rem;
	
}
.page-navigation__button:hover{
	background-color: rgb(220,220,220);
}
.page-navigation__button--icon{
    line-height: 2.45rem;
	width: 2rem;
}
.page-navigation__button--text{
	line-height: 1.9rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.page-navigation__container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 2rem;
}
.page-navigation__menu-list{
	list-style-type: none;
	padding-left: 0px;
	margin-top: 1rem;
	margin-bottom: 0px;
	
	display: none;
	
}
.page-navigation__menu-item{
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	
	text-transform: uppercase;
	color: black;
	text-decoration: none;
	line-height: 1.9rem;
	border: 1px solid transparent;
	display: inline-block;
}

.page-navigation__menu-item:hover{
	text-decoration: underline;
}
.page-navigation__menus-container {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.page-navigation::after {
	content: "";
	height: 0.66rem;
	width: 100%;
	display: block;
	background: linear-gradient(to left, #00ff7e, #3cd889, #18a59f, #036460);
}
.header{
	background-image: url("../img/images/portfolio-background-hero.jpg");
	background-position: 50% 50%;
	background-size: cover;
	
	padding-top: 3rem;
	padding-bottom:2rem;
}
.header__datenschutz{
	background-image: url("../img/background-hero_teaser_datenschutz.jpg");
	background-position: 50% 50%;
	background-size: cover;
	
	padding-top: 3rem;
	padding-bottom:2rem;
}
.header__image{
	display: block;
	margin: 0 auto;
	width: 10rem;
	height: 10rem;
}
.header__me{
	color: white;
	text-align: center;
	text-transform: uppercase;
	font-size: 2rem;
	margin-top: 1rem;
	margin-bottom: 0px;
	line-height: 1.25;
	text-shadow: 0px 0px 15px black;
}
.header__degree{
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 1.25rem;
	font-weight:  200;
	margin-top: 0px;
	margin-bottom: 0.75rem;
	text-shadow: 0px 0px 15px black;
}
.header__buttons {
  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;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.header__button {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0.125rem 0.25rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 15rem;
          flex: 0 1 15rem;
}

.title-container{
	text-align: center;
}
.title-container__heading{
	color: #7db1ae;
	font-size: 2.3rem;
	padding-top: 3.5rem;
	margin-top: 0px;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}
.title-container__heading::before{
	content: ":";
}
.title-container__heading::after{
	content: "";
	display: block;
	width: 10rem;
	height: 2px;
	background-color: black;
	margin: 1rem auto 0px auto;
}
.title-container--inverse .title-container__heading,
.title-container--inverse .title-container__subtext{
	color: white;
}
.title-container--inverse .title-container__heading::after{
	background-color: white;
}
.title-container__subtext{
	font-weight: 200;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	margin-top: 1.25rem;
	margin-bottom: 0px;
	padding-bottom: 3.5rem;
	
}
.title-container__icon{
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	border: 1px solid black;
	border-radius: 50%;
	font-size: 0.66em;
	line-height: 1.9em;
}

.data-protection{
	padding-top: 3.5rem;
	padding-bottom: 3.5rem; 
}

.text-boxes{
	background-color: #f7f7f7;
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}
.text-boxes__heading{
	text-align: center;
	font-size: 1.25rem;
	margin-top: 0px;
	margin-bottom: 0px;
}

.text-boxes__paragraph{
	margin: 1rem auto 1rem auto;
	text-align: center;
	max-width: 25rem;

}
.datenschutz__heading{
	text-align: center;
	font-size: 1.25rem;
	margin: 1rem auto 1rem auto;
	max-width: 50rem;
}
.datenschutz__paragraph{
	margin: 1rem auto 1rem auto;
	text-align: justify;
	max-width: 50rem;

}


.parallax {
  background-image: url("../img/data-parall-pic.jpg");
  height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.text-boxes__quote{
	margin: 0px auto;
	padding: 0px 0px 0px 4rem;
	font-size: 1.25rem;
	font-weight: bold;
	max-width: 21rem;
	min-height: 3.1rem;
	
	background-image: url("../img/quote.svg");
	background-repeat: no-repeat;
	background-size: 3.5rem auto;
	background-position: left 0.24em;
	}

.services__icon{
	font-size: 8rem;
	border: 0.2rem solid black;
}

.services__icon::before{
	top: -0.2em;
}

.services__label{
	margin-top: 1rem;
	margin-bottom: 0px;
	font-size: 1rem;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: 0.4em;
}

.services__column{
	text-align: center;
	margin-bottom: 1.5rem;
}
.services{
	margin-bottom: 2rem;
}
.references-tabs {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.references-tabs__button{
	display: block;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0.2rem 1rem;
	background-color: #f7f7f7;
	border-radius: 1000px;
	color: black;
	text-decoration: none;
	 white-space: nowrap;
	
}
.references-tabs__button:hover{
	background-color: #e4e4e4;
}
.references-tabs__button--active{
	color: white;
	background: #2d9490;
	font-weight: bold;
}

.references-tabs__button--active:hover{
	background-color: #006964;
}

.references-images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

  margin: 1rem -0.1rem 0px -0.1rem;
  padding-left: 0px;
  list-style-type: none;
}
.references-images__image {
  display: block;
  max-width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.references-images__image:hover {
  -webkit-filter: none;
          filter: none;
}

.references-images__column {
  padding: 0.1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.customers{
	background-color: #f7f7f7;
}
.customers__all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.customers__logo{
	width: 10rem;
	display: block;
	margin: 0px auto;
}
.customer-opinions{
	background-color: #f7f7f7;
}
.customer-opinions__swiper{

}
.customer-opinions__opinion{
	margin: 0px;
	text-align: center;
}
.customer-opinions__opinion-quote{
	margin: 2rem 0px;
	font-size: 1.75rem;
}
.customer-opinions__opinion-quote::before,
.customer-opinions__opinion-quote::after{
	content: "";
	display: inline-block;
	width: 1em;
	height: 0.75em;
	background-image: url("../img/quote.svg");
	background-repeat: no-repeat;
	background-size: contain;
}
.customer-opinions__opinion-quote::before{
	position: relative;
	left: 0.2em;
}
.customer-opinions__opinion-quote::after {
  position: relative;
  left: -0.1em;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.customer-opinions__opinion-author{
	font-style: normal;
	font-size: 1rem;
}
.customer-opinions__pagination-container{
	text-align: center;
}
.customer-opinions__pagination::before {
	content: "";
	display: block;
	background: linear-gradient(to left, #00ff7e, #3cd889, #18a59f, #036460);
	height: 0.33rem;
	margin-bottom: 0.5rem;
}
.customer-opinions__pagination{
	text-align: center;
	margin-top: 0.5rem;
	margin-bottom: 2rem;
	width: auto!important;
	display: inline-block;
}
.customer-opinions__pagination-bullet{
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-color: grey;
	border-radius: 50%;
	margin: 0px 0.5rem;
	cursor: pointer;
}

.customer-opinions__pagination-bullet--active{
	background-color: #7db1ae;
}

.contact{
	background-image: url("../img/contact-background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 3.5rem;
}

.contact__label{
	color: white;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	font-size: 1rem;
	display: block;
}
.contact__input {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.4rem;
  border: 1px solid rgb(200, 200, 200);
  background-color: rgba(255, 255, 255, 0.9);
}

.contact__input:focus {
  border: 1px solid #7db1ae;
  -webkit-box-shadow: 0px 0px 5px white;
          box-shadow: 0px 0px 5px white;
  background-color: rgba(255, 255, 255, 1);
}
.contact__input:invalid{
	color: red;
}
.contact__input:focus:invalid{
	color: black;
}

.contact__input--textarea{
	height: 8rem;
	line-height: 1.5rem;
}
.contact__field-group{
	margin-bottom: 1rem;
}
.contact__field-column {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

.contact__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.contact__button{
	width: 100%;
}
.contact__disclaimer{
	margin-top: 0px;
	margin-bottom: 0px;
	color: white;
	font-size: 0.75rem;
}
.contact-details{
	margin-top: 3.5rem;
}
.contact-details__column{
	text-align: center;
	margin-bottom: 3.5rem;
}
.contact-details__heading{
	margin-top: 1rem;
	margin-bottom: 1rem;
	
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	font-size: 1rem;
	text-align: center;
	
}
.contact-details__text{
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	font-size: 1rem;
	font-style: normal;
}
.contact-details__icon{
	font-size: 6rem;
	border: 0.2rem solid black;
}
.contact-details__phone-link,
.contact-details___email-link{
	color: black;
	text-decoration: none;
}
.contact-details__phone-link:hover,
.contact-details___email-link:hover{
	color: #7db1ae;
}
.footer-logo{
	background-color: #f7f7f7;
	text-align: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.footer-logo__image{
	height: 3rem;
	display: block;
	margin: 0px auto;
}
.ausgabe{
	color: white;
	text-align: center;
}
@media (max-width: 375px) {
	.header__me{
		font-size: 1.5rem;
	}
	.header__degree{
		font-size: 1rem;
	}
	.contact__disclaimer{
		text-align: center;
	}
}

@media (min-width: 650px) {
	.text-boxes__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  } 

  .text-boxes__about-me,
  .text-boxes__quote-container {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0px;
    padding: 0px 1rem;
  }

	.text-boxes__paragraph{
		margin-bottom: 0px;
	}
	
	.services {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
  }

	.services__column{
		flex: 0 0 50%;
	}
	 .references-images {
    margin-top: 2.9rem;
  }
	 .references-images__column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
	.customer-opinions__opinion-quote::before,
	.customer-opinions__opinion-quote::after{
		content: none;
	}
	.customer-opinions__swiper-container{
		padding-right: 8rem;
		padding-left: 8rem;
		position: relative;
	}
	.customer-opinions__swiper-container::before {
    content: "";
    display: inline-block;
    width: 7rem;
    height: 7rem;
    background-image: url("../img/quote.svg");
    background-repeat: no-repeat;
    position: absolute;
    left: 0rem;
    -webkit-filter: invert(100%);
            filter: invert(100%);
  }
	
	.contact__info{
		margin-left: -1rem;
		margin-right: -1rem;
	}
	.contact__field-column {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .contact-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .contact-details__column {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0px;
  }
}
@media (min-width: 1050px) {
	.page-navigation__menu-list {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
  	}
	
	.header{
		padding-top: 5rem;
		padding-bottom: 4rem;
	}
	.header__degree{
		margin-bottom: 1.25rem;
	}
	
	.services{
		max-width: none;
	}
	.services__column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
  }

  .references-images__column {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333%;
            flex: 0 0 33.3333333%;
  }
}

@media (min-width: 1500px) {
	html{
		font-size: 1.5rem;
	}
		.header{
		padding-top: 8rem;
		padding-bottom: 7rem;
	}
	.header__degree{
		margin-bottom: 2rem;
	}
}