@font-face {
  font-family: 'Lato'; /* Give your font a unique name */
  src: url('/assets/fonts/Lato-Regular.ttf') format('ttf');
  src: url('/assets/fonts/Lato-Regular.woff2') format('woff2');
  font-weight: 400;  /* Specify the font's weight */
  font-style: normal;  /* Specify the font's style */
}

@font-face {
  font-family: 'Lato'; /* Give your font a unique name */
  src: url('/assets/fonts/Lato-Bold.ttf') format('ttf');
  src: url('/assets/fonts/Lato-Bold.woff2') format('woff2');
  font-weight: 900;  /* Specify the font's weight */
  font-style: normal;  /* Specify the font's style */
}

@font-face {
  font-family: 'Lato'; /* Give your font a unique name */
  src: url('/assets/fonts/Lato-Light.ttf') format('ttf');
  src: url('/assets/fonts/Lato-Light.woff2') format('woff2');
  font-weight: 300;  /* Specify the font's weight */
  font-style: normal;  /* Specify the font's style */
}

@font-face {
  font-family: 'Lato'; /* Give your font a unique name */
  src: url('/assets/fonts/Lato-Semibold.ttf') format('ttf');
  src: url('/assets/fonts/Lato-Semibold.woff2') format('woff2');
  font-weight: 700;  /* Specify the font's weight */
  font-style: normal;  /* Specify the font's style */
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/************* Text ***************/

h1, h2, h3, h4, a, p {
	font-family: 'Lato' !important;
}

 h1 {
	 font-size: 4em !important;
	 font-weight: 400 !important;
 }
 
 
 h2 {
 	font-weight: 700 !important;
	 margin-bottom: 2% !important;
  }
  
 h3 {
	 font-weight: 700 !important;
	}
	
 h4 {
	 font-weight: 300 !important;
	}
	
p {
	font-weight: 300 !important;
	font-size: 1.2em;
}

a {
	
}

/************** Layout **************/

nav {
	z-index: 300 !important;
	background-color: rgba(34, 34, 34, 0.8) !important;
	width: 100%;
	position: fixed !important;
	top: 0 !important;
	width: 100%;
}

nav img {
	max-height: 44px;
	padding-left: 15%;
}

nav li.nav-item a {
	font-weight: 300 !important;
	color: #fff !important;
}

button.navbar-toggler {
	border: 0px !important;
	padding-right: 5% !important;
}

ul.navbar-nav {
	padding-right: 5%;
}

.hero {
	background-image: url('/assets/img/img_buchenwaeldchen.jpg');
	background-size: cover;
	height: 100vh !important;
	background-repeat: no-repeat;
	background-position: center;
}

.hero h4 {
	font-weight: 300 !important;
	margin: 2% 0;
}

.hero .btn-outline-light {
	background-color: rgba(34, 34, 34, 0.5);
}

.doku-hero {
	background-image: url('/assets/img/img_dokumitlesezeichen.jpg');
	height: 800px !important;
	background-repeat: no-repeat;
	background-position: center;
}

.kontakt-hero {
	background-image: url('/assets/img/img_brettchenbg-1.jpg');
	height: 800px !important;
	background-repeat: no-repeat;
	background-position: center;
}

.container {
	padding-left: 5% !important;
	padding-right: 5% !important;
}

.row {
	margin-top: 10% !important;
}

/*.row>* {
	padding-right: 0 !important;
	padding-left: 0 !important;
	margin-top: 0 !important;
}*/

btn {
	border: 2px solid #000000 !important;
	width: 36px !important;
	opacity: 100 !important;
}

hr {
	border: 2px solid #000 !important;
	width: 36px !important;
	opacity: 100% !important;
}

.vr {
	height: 18px !important;
	opacity: 100% !important;
	margin: auto 1% auto 1% !important;
}

hr.sturmbrettchen-hr {
	margin-left: calc(var(--bs-gutter-x) * .5) !important;
}

.werte img {
	margin-top: 5%;
	width: 80%;
}

.btn {
	border-radius: 0 !important;
	margin-top: 1% !important;
	width: 100% !important;
	max-width: 300px !important;
	margin: auto;
	padding: 1.5% 2% !important;
}

div.hero > a.btn-outline-light {
	background-color: rgba(0, 0, 0, 0.5) !important;
	
}

#doku .btn {
	background: #000;
	color: #fff;
}


#doku a.btn:hover {
	background: #222222 !important;
}

.doku {
	padding: 0%  10% 0% 10% !important; 
}

.doku .info {
	margin-bottom: 5%;
}

.doku > .col-sm p {
	margin-bottom: 0;
}

div.pricingbox {
	border: 1px solid #000000 !important;
	padding: 9% 5% 5% 5%;
	width: 100% !important;
	max-width: 280px !important;
	margin: auto;
	margin-bottom: 10%;
}

.doku .preis {
	font-size: 4em !important;
	font-weight: normal !important;
}

div.modal {
	max-height: 100vh !important;
}

div.modal-dialog {
	width: 70% !important;
	height: auto;
	margin: 5% auto !important;
}

.gallery img {
	width: 100% !important;
}

footer a {
	color: #000 !important;
	font-weight: lighter !important;
	opacity: 100% !important;
}

footer a:hover {
	color: #222 !important;
}



/************** Unterseiten ***************/

body#impressum, body#datenschutz, body#widerruf {
	background-color: #222 !important;
	color: #fff;
}

body#impressum h2, body#datenschutz h2, body#widerruf h2 {
	margin-top: 15%;
}

body#impressum hr, body#datenschutz hr, body#widerruf hr {
	border-color: #fff !important;
	margin: 2% 0 2% 0;
}

/*body#impressum hr {
	margin-left: calc(var(--bs-gutter-x) * .5) !important;
}*/

body#impressum > footer a, body#datenschutz > footer a, body#widerruf > footer a {
	color: #fff !important;
}

div.box {
	border: 2px solid #fff;
	padding: 5%;
	margin-top: 5%;
}

div.box h5 {
	margin-bottom: 2%;
	font-size: 1.8em;
}


@media (min-width: 512px) and (max-width: 1024px) {

#navbarSupportedContent ul.navbar-nav {
	padding-left: 5% !important;
}

}


@media (max-width: 512px) {
	
	.mobile {
		display: block;
	}
	
	.desktop {
		display: none;
	}
	
	nav img {
	padding-left: 5%;
	}
	
	#navbarSupportedContent ul.navbar-nav {
		padding-left: 5% !important;
	}
	
	h1 {
		font-size: 3em !important;
	}
	
	.container {
		padding-left: 10% !important;
		padding-right: 10% !important;
	}
	
	.btn {
		padding: 4% 2% !important;
	}
	
	hr {
		margin-top: 2% !important;
		margin-bottom: 6% !important;
	}
	
	hr.sturmbrettchen-hr {
		margin-top: 2% !important;
	}
	
	.werte img {
		width: 100%;
	}
	
	.col {
		flex: none !important;
		margin-top: 10% !important;
	}
	
	.gallery .row>* {
		padding: 0 !important;
	}
	
	div.modal-dialog {
		width: 70% !important;
		height: auto !important;
		margin: 40% 10% 0% 2% !important;
	}
	
	.modal-content {
		width: 120% !important;
		margin: 40% 10% auto 8.5% !important;
	}
	
	.hero, .kontakt-hero, .doku-hero {
		padding: 5% !important;
		height: 100vh !important;
	}
	
	.hero, .doku-hero {
		margin-bottom: 15% !important;
	}
	
	body#impressum h2, body#datenschutz h2, body#widerruf h2 {
		margin-top: 30%;
		margin-bottom: 10% !important;
	}
	
	button.navbar-dark {
		border-color: rgba(255, 255, 255, 0) !important;
	}
	
}


@media (min-width: 513px) { 
	
	.mobile {
		display: none !important;
	}
	
}