/* === LOAD GOOGLE FONTS LOCALLY ===*/

/* titillium-web-200 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-200italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-300italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-600italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* titillium-web-900 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/titillium-web-v19-latin_latin-ext-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/titillium-web-v19-latin_latin-ext-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}





/* === GLOBALS === */

:root { 
    --black: #000000;
    --light-gray: #838181;
    --dark-gray: #636363;
    --teal-blue: #083f5d;
    --white: #ffffff;

    font-family: "Titillium Web", Helvetica, sans-serif;

}





/* === HELPERS === */
.aligned-left {
  text-align: left !important;
}



/* === STYLES === */

html {
	width: 100% !important;
	height: 100vh !important;
	height: 100% !important;
	background-image: url("../img/bg-img.jpg") !important;
	background-position: center top !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
  overflow: hidden !important;
  font-size: 62.5%;  /* now 1rem === 10px */
}


body {
	width: 100% !important;
	height: 100vh !important;
	height: 100% !important;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
	padding-top: 10% !important;
  overflow: scroll !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
}



.container {
  width: 98% !important;
	color: var(--dark-gray) !important;
	text-align: center !important;
	margin: auto !important;
	margin-bottom: 2rem !important;
	padding-bottom: 0rem !important;
}


.home .container {
	margin-bottom: 0rem !important;
}




header {
  width: 100%;
  padding-top: 3rem;
}


a {
	color: var(--dark-gray) !important;
	text-decoration: none !important;
}


a:hover {
	color: var(--teal-blue) !important;
	text-decoration: none !important;
}


ul {
  padding-left: 2rem !important;
}


table {
  margin-top: 2rem !important;
}


h1 {
  font-size: 2.8rem;
  line-height: 3.8rem;
  font-weight: 600;
}



h2 {
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 500;
  color: var(--teal-blue) !important;
  margin-top: 2rem;
  margin-bottom: -1rem;
}


.site-title {

}


.offscreen {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}


.site-logo {
  position: relative;
	width: 80% !important;
	max-width: 280px !important;
	margin: 0px auto;
	margin-top: 2rem !important;
}


.site-claim {
	font-size: 2.0rem;
	line-height: 3.0rem;
	margin-top: 1.5rem;
}


main {
  max-width: 800px;
  min-width: 300px;
  width: 90% !important;
	text-align: center !important;
	margin: auto !important;
	margin-bottom: 0px !important;  
}


.contact {
  padding-top: 4rem;
	padding-bottom: 10rem;
}


.contact__name {
  font-size: 2rem;
  line-height: 3rem;
}
 

.contact__address {
  margin-bottom: 0;
}

.contact__company-details {
  margin-top: 0;
}

.contact__infos {
  font-size: 1.8rem;
  line-height: 3.2rem;
}

.contact__phone,
.contact__mail {
    color: var(--teal-blue) !important;
    font-weight: 600 !important;
	  text-decoration: none !important;

}


.contact__mail {

}

.contact__fax {

}








.impressum h1,
.datenschutz h1 {
  margin-top: 4rem;
}


section.credits {
  margin-top: 2rem;
}












footer {
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  
}


.footer-menu {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12rem;
  list-style: none;
  text-align: center;
  margin-left: -2rem !important;
}


.footer-menue__item {
  display: inline-block;
  width: fit-content;
  color: var(--teal-blue) !important;
  font-weight: 600 !important;
}














/* BREAKPOINT => Tablet and bigger */ 

@media screen and (min-width: 769px) {
	
	
	body {
		width: 100% !important;
		height: 100% !important;
		background-attachment: fixed !important;
		background-repeat: no-repeat !important;
		background-size: cover !important;
		padding-top: 2% !important;
	}


  header {
    padding-top: 8rem;

  }


  .site-logo {
		width: 60% !important;
	  max-width: 400px !important;
		margin-top: 2rem !important;
	}


  main {
    max-width: 800px;
    min-width: 720px;
    width: 98% !important;
  }


  .impressum h1,
  .datenschutz h1 {
    text-align: center !important;
    margin-top: 6rem;
  }
	

  .contact {
    padding-top: 18rem;
    padding-bottom: 18rem;
  }


  section.credits {
    margin-top: 4rem;
  }


  footer {
    padding-top: 12rem;
    padding-bottom: 8rem;
    margin-left: 0rem !important;
  }
	
	
}