@charset "utf-8";

:root {

	--btn-primary-color: #ffffff;

	--btn-primary-color-hover: #ffffff;

	--btn-primary-bg: #2a4365;

	--btn-primary-bg-hover: #3f5f8b;

	--btn-primary-border: #2a4365;

	--btn-primary-border-hover: #3f5f8b;

	--btn-secondary-color: #2a4365;

	--btn-secondary-color-hover: #2a4365;

	--btn-secondary-bg: #ffffff;

	--btn-secondary-bg-hover: #ececec;

	--btn-secondary-border: #2a4365;

	--btn-secondary-border-hover: #2a4365;

	--btn-flat-color: #2a4365;

	--btn-flat-color-hover: #3f5f8b;

	--overline-color: #2a4365;

  }

/* quicksand-regular - latin */

@font-face {

  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 400;

  src: local(''),

       url('/fonts/quicksand-v30-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */

       url('/fonts/quicksand-v30-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

/* quicksand-500 - latin */

@font-face {

  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 500;

  src: local(''),

       url('/fonts/quicksand-v30-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */

       url('/fonts/quicksand-v30-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

/* quicksand-600 - latin */

@font-face {

  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 600;

  src: local(''),

       url('/fonts/quicksand-v30-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */

       url('/fonts/quicksand-v30-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

/* quicksand-700 - latin */

@font-face {

  font-family: 'Quicksand';

  font-style: normal;

  font-weight: 700;

  src: local(''),

       url('/fonts/quicksand-v30-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */

       url('/fonts/quicksand-v30-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

@font-face {

    font-display: swap;

    font-family: Azo Sans;

    font-style: normal;

    font-weight: 300;

    src: url(fonts/AzoSans-Light.woff2) format("woff2"),url(/Fonts/AzoSans-Lightwoff) format("woff")

}

@font-face {

    font-display: swap;

    font-family: Azo Sans;

    font-style: normal;

    font-weight: 500;

    src: url(/fonts/AzoSans-Regular.woff2) format("woff2"),url(/Fonts/AzoSans-Regular.woff) format("woff")

}

@font-face {

    font-display: swap;

    font-family: Azo Sans;

    font-style: normal;

    font-weight: 600;

    src: url(/fonts/AzoSans-Medium.woff2) format("woff2"),url(/Fonts/AzoSans-Medium.woff) format("woff")

}

@font-face {

    font-display: swap;

    font-family: Azo Sans;

    font-style: normal;

    font-weight: 600;

    src: url(/fonts/AzoSans-Medium.woff2) format("woff2"),url(/Fonts/AzoSans-Medium.woff) format("woff")

}

/* Variablen */

:root {

}

*

{

  margin:        			0;

  padding:      			0;

}

@media all {

  body, html

  {

    height:                  100%;

  }

  body {

    font-size:              1.05rem;

    line-height:            1.7rem;

    color:                  #666666;

    font-weight:            100; 

	font-family:            'Azo sans', sans-serif;	

  }

  .text-base {

	font-size: 				1.05rem;

	line-height: 			1.7rem;

  }

  b, strong {

	font-weight: 			700;

  }

  img {

    vertical-align:         middle;

    flex-shrink:            0;

    width:                  100%;

    height:                 auto;

	object-fit:				contain;

  }

  ul {

	margin: 				1rem 0px 1rem 2rem;

	list-style-type: 		disc;

  }

  p a {

	text-decoration: 		underline;

  }

  p a:hover {

	text-decoration: 		none;

  }

  a img:hover {

	filter: 				brightness(80%);

  }

  	.mainContainerFull {

		width:				100%;

		box-sizing: 		border-box;

		margin: 		0px auto;

	}

	.mainContainerWithMargin {

		width:				calc(100% - 512px);

		margin-left:		256px;

		margin-right:		256px;

		box-sizing: 		border-box;

	}

	.mainContainerWithMarginFull {

		width: 				100%;

		padding-left: 		256px;

		padding-right: 		256px;

		box-sizing: 		border-box;

	}

	h1 {

		font-size:			2.25rem;

		line-height:		2.5rem;

		margin-bottom:		1rem;

		font-weight: 		400;

		letter-spacing: 	1px;

	}

	h2 {

		font-size:			1.5rem;

		line-height:		1.75rem;

		margin-bottom:		1rem;

		margin-top: 		2rem;

		font-weight: 		400;

		letter-spacing: 	1px;

	}

	h3 {

		font-size:			1.25rem;

		line-height:		1.5rem;

		margin-bottom:		1rem;

		margin-top: 		1.5rem;

		font-weight: 		400;

		letter-spacing: 	1px;

	}

	h2.subheader {

		margin-top: 		0px;

	}

	.form-group legend

	{

		display:			none;

	}

	.form-group input,

	.form-group textarea {

		border:				1px solid #cccccc;

		border-radius: 		5px;

		padding: 			10px;

		width: 				100%;

		box-sizing: 		border-box;

	}

	.overline {

		margin-bottom: 		1rem;

		font-weight: 		bold;

		font-size: 			0.75rem;

		letter-spacing: 	0.1em;

	}

	.btn-primary {

		display: 			inline-block;

		color: 				var(--btn-primary-color);

		background: 		var(--btn-primary-bg);

		border: 			1px solid;

		border-color: 		var(--btn-primary-border);

		border-radius: 		5px;

		padding: 			0.75rem 1rem;

		cursor: 			pointer;

	}

	.btn-primary:hover {

		background: 		var(--btn-primary-bg-hover);

		border-color: 		var(--btn-primary-border-hover);

		color: 				var(--btn-primary-color-hover);

	}

	.btn-secondary {

		display: 			inline-block;

		color: 				var(--btn-secondary-color);

		background: 		var(--btn-secondary-bg);

		border: 			1px solid;

		border-color: 		var(--btn-secondary-border);

		border-radius: 		5px;

		padding: 			0.75rem 1rem;

		cursor: 			pointer;

	}

	.btn-secondary:hover {

		background: 		var(--btn-secondary-bg-hover);

		border-color: 		var(--btn-secondary-border-hover);

		color: 				var(--btn-secondary-color-hover);

	}

	.btn-flat {

		display: 			inline-block;

		color: 				var(--btn-flat-color);

		padding: 			0.75rem 1rem;

		cursor: 			pointer;

		text-decoration:	underline;

	}

	.btn-flat:hover {

		color: 				var(--btn-primary-flat-hover);

		text-decoration: 	none;

	}

	.h-600 {

		height: 			auto;

		width: 				auto;

	}

	.ratio-16-9 {

		aspect-ratio: 16/9 auto;

	}

	.ratio-4-1 {

		aspect-ratio: 3/1 auto;

	}

	.ratio-3-1 {

		aspect-ratio: 3/1 auto;

	}

	.ratio-3-2 {

		aspect-ratio: 3/2 auto;

	}

	.ratio-1-1 {

		aspect-ratio: 1/1 auto;

	}

	.ratio-2-3 {

		aspect-ratio: 2/3 auto;

	}

	.ratio-2-1 {

		aspect-ratio: 2/1 auto;

	}

	.bottom-5 {

		bottom: 			5%;

	}

	.bottom-10 {

		bottom: 			10%;

	}

	.left-5 {

		left: 				5%;

	}

	.left-10 {

		left: 				10%;

	}

	.mask-header {

		font-family: 		math;

	}

	.fontsize-xs {

		font-size: 			75%;

		line-height: 		160%;

	}

	.fontsize-sm {

		font-size: 			85%;

		line-height: 		160%;

	}

	.fontsize-base {

		font-size: 			100%;

		line-height: 		160%;

	}

	.fontsize-lg {

		font-size: 			110%;

		line-height: 		160%;

	}

	.fontsize-xl {

		font-size: 			120%;

		line-height: 		160%;

	}

	.fontsize-2xl {

		font-size: 			130%;

		line-height: 		160%;

	}

	.fontsize-3xl {

		font-size: 			140%;

		line-height: 		160%;

	}

	.fontsize-4xl {

		font-size: 			150%;

		line-height: 		160%;

	}

	.fontsize-5xl {

		font-size: 			160%;

		line-height: 		160%;

	}

	.fontsize-6xl {

		font-size: 			170%;

		line-height: 		160%;

	}

	.fontsize-7xl {

		font-size: 			200%;

		line-height: 		160%;

	}

	.fontsize-8xl {

		font-size: 			250%;

		line-height: 		120%;

	}

	.fontsize-9xl {

		font-size: 			300%;

		line-height: 		120%;

	}

	.fontsize-10xl {

		font-size: 			350%;

		line-height: 		120%;

	}

	.fontsize-11xl {

		font-size: 			400%;

		line-height: 		120%;

	}

	.fontsize-12xl {

		font-size: 			450%;

		line-height: 		120%;

	}

	.dark {

		background: 		#000000;

	}

	.light {

		background: 		#ffffff;

	}

	.header img {

		max-height: 		80px;

	}	

	.bg-8db8b6 {

		background: 		#8db8b6;

	}

	.bg-619b98 {

		background:  		#619b98;

	}

	.bg-7e988b {

		background:  		#7e988b;

	}

	.bg-85a8aa {

		background:  		#85a8aa;

	}

	.bg-a0c5b8 {

		background:  		#a0c5b8;

	}

	.bg-e7e8e1 {

		background:  		#e7e8e1;

	}

	.bg-blue-dsh {

		background: 		#526590;

	}

	.bg-green-dsh {

		background: 		#95b820;

	}

	.overlay-none {

		top: 				0px;

		left: 				0px;

	}

	.overlay-small {

		top: 				10px;

		left: 				10px;

	}

	.overlay-medium {

		top: 				20px;

		left: 				20px;

	}

	.overlay-large {

		top: 				30px;

		left: 				30px;

	}

	.fade {

		animation: fadeIn linear 1s;

	  }

	  @keyframes fade {

		from {opacity: .4} 

		to {opacity: 1}

	  }	

	  .slide-left {

		animation: 2.0s slide-left;

	  }

	  @keyframes slide-left {

		from {

		  margin-left: 100%;

		}

		to {

		  margin-left: 0%;

		}

	  }

	.gbOverline {

		text-transform: 	uppercase;

		color: 				var(--overline-color);

		font-size: 			75%;

		line-height: 		160%;

		margin-bottom: 		1rem;

		letter-spacing: 	1px;

		font-weight: 		bold;

	}

	.bg-brown-100 {

		background-color: 			#e3dbd7;

	}

	.bg-brown-200 {

		background-color:  			#c7b8b1;

	}

	.bg-brown-300 {

		background-color:			#ac978d;

	}

	.bg-brown-400 {

		background-color:  			#917669;

	}

	.bg-brown-500 {

		background-color:  			#765748;

	}

	.bg-brown-600 {

		background-color:  			#5b3a29;

	}

	.bg-brown-700 {

		background-color:  			#4c3123;

	}

	.bg-brown-800 {

		background-color:  			#3e281e;

	}

	.bg-brown-900 {

		background-color: 			#302018;

	}

	.bg-muted-beige {

		background-color:  			#F7F1F0;

	}

	.bg-muted-altrosa {

		background-color:  			#CEA6A0;

	}

	.bg-muted-braun {

		background-color:  			#A15C38;

	}

	.bg-muted-schwarz {

		background-color:  			#262220;

	}

	.bg-muted-olive {

		background-color:  			#687477;

	}

	.bg-muted-ocker {

		background-color:			#AD957B;

	}

	.bg-muted-weinrot {

		background-color:  			#6B2F2A;

	}

	.bg-obh-mint {

		background-color: 			#bad9b9;

	}

	.bg-obh-olive {

		background-color:  			#829079;

	}

	.bg-obh-beige {

		background-color:  			#ede6b9;

	}

	.bg-obh-hellbraun {

		background-color:  			#b9925e;

	}





	.text-brown-100 {

		color: 						#e3dbd7;

	}

	.text-brown-200 {

		color:  					#c7b8b1;

	}

	.text-brown-300 {

		color:						#ac978d;

	}

	.text-brown-400 {

		color:  					#917669;

	}

	.text-brown-500 {

		color:  					#765748;

	}

	.text-brown-600 {

		color:  					#5b3a29;

	}

	.text-brown-700 {

		color:  					#4c3123;

	}

	.text-brown-800 {

		color:  					#3e281e;

	}

	.text-brown-900 {

		color: 						#302018;

	}

	.text-muted-altrosa {

		color:  					#CEA6A0;

	}

	.text-muted-braun {

		color:  					#A15C38;

	}

	.text-muted-schwarz {

		color:  					#262220;

	}

	.text-muted-olive {

		color:  					#687477;

	}

	.text-muted-beige {

		color:  					#F7F1F0;

	}

	.text-muted-ocker {

		color:  					#AD957B;

	}

	.text-muted-weinrot {

		color:  					#6B2F2A;

	}



	.text-obh-mint {

		color: 						#bad9b9;

	}

	.text-obh-olive {

		color:  					#829079;

	}

	.text-obh-beige {

		color:  					#ede6b9;

	}

	.text-obh-hellbraun {

		color:  					#b9925e;

	}


	.bg-mint-100 {
		background-color:  			#F4FAF4;
	}
	.bg-mint-200 {
		background-color:  			#E6F2E6;
	}
	.bg-mint-300 {
		background-color:  			#D5EAD5;
	}
	.bg-mint-400 {
		background-color:  			#C4E2C4;
	}
	.bg-mint-500 {
		background-color:  			#BAD9B9;
	}
	.bg-mint-600 {
		background-color:  			#9FC79F;
	}
	.bg-mint-700 {
		background-color:  			#7FB27F;
	}
	.bg-mint-800 {
		background-color:  			#5E9B5E;
	}
	.bg-mint-900 {
		background-color:  			#3E7A3E;
	}

	.text-mint-100 {
		color:  					#F4FAF4;
	}
	.text-mint-200 {
		color:  					#E6F2E6;
	}
	.text-mint-300 {
		color:  					#D5EAD5;
	}
	.text-mint-400 {
		color:  					#C4E2C4;
	}
	.text-mint-500 {
		color:  					#BAD9B9;
	}
	.text-mint-600 {
		color:  					#9FC79F;
	}
	.text-mint-700 {
		color:  					#7FB27F;
	}
	.text-mint-800 {
		color:  					#5E9B5E;
	}
	.text-mint-900 {
		color:  					#3E7A3E;
	}


	.gbflexboxen {

		display: 					grid;

	}

	.gbflexboxen.fiveCol {

		grid-template-columns: 		repeat(5, minmax(0, 1fr));

	}

	.gbflexboxen.fourCol {

		grid-template-columns: 		repeat(4, minmax(0, 1fr));

	}

	.gbflexboxen.threeCol {

		grid-template-columns: 		repeat(6, minmax(0, 1fr));

	}

	.gbflexboxen.twoCol {

		grid-template-columns: 		repeat(2, minmax(0, 1fr));

	}

	.gbflexboxen.oneCol {

		grid-template-columns: 		repeat(1, minmax(0, 1fr));

	}

	.gbflexbox.oneCol {

		grid-column: 				span 1 / span 1;

	}

	.gbflexbox.twoCol {

		grid-column: 				span 1 / span 1;

	}

	.gbflexbox.threeCol {

		grid-column: 				span 2 / span 2;

	}

	.gbflexbox.fourCol {

		grid-column: 				span 1 / span 1;

	}

}

@media screen and (max-width:1920px){

}

@media screen and (max-width:1792px){

	.mainContainerWithMargin {

		width:				calc(100% - 128px);

		margin-left:		64px;

		margin-right:		64px;

		box-sizing: 		border-box;

	}

	.mainContainerWithMarginFull {

		width: 				100%;

		padding-left: 		64px;

		padding-right: 		64px;

		box-sizing: 		border-box;

	}

}

@media screen and (max-width:1536px){

}

@media screen and (max-width:1440px){

	.gbflexbox.fourCol {

		grid-column: 				span 2 / span 2;

	}

	.gbflexbox.threeCol {

		grid-column: 				span 3 / span 3;

	}

}

@media screen and (max-width:1280px){

}

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

	.mainContainerWithMargin {

		width:				calc(100% - 64px);

		margin-left:		32px;

		margin-right:		32px;

		box-sizing: 		border-box;

	}

	.mainContainerWithMarginFull {

		width: 				100%;

		padding-left: 		32px;

		padding-right: 		32px;

		box-sizing: 		border-box;

	}

	.ratio-3-1 {

		aspect-ratio: 		3/2 auto;

	}

	.h-600 {

		height: 			600px;

		width: 				auto;

	}

	.header img {

		max-height: 		50px;

	}

	.gbflexboxen {

		flex-wrap: 			wrap;

	}

}

@media screen and (max-width:736px){

	.mainContainerWithMargin {

		width:				calc(100% - 32px);

		margin-left:		16px;

		margin-right:		16px;

		box-sizing: 		border-box;

	}

	.mainContainerWithMarginFull {

		width: 				100%;

		padding-left: 		16px;

		padding-right: 		16px;

		box-sizing: 		border-box;

	}

	.h-600 {

		height: 			600px;

		width: 				auto;

	}

	.ratio-16-9 {

		aspect-ratio: 		3/2 auto;

	}

	.ratio-3-2 {

		aspect-ratio: 		3/2 auto;

	}

	.gbflexbox.fourCol {

		grid-column: 				span 4 / span 4;

	}

	.gbflexbox.threeCol {

		grid-column: 				span 6 / span 6;		

	}

	.gbflexbox.twoCol {

		grid-column: 				span 2 / span 2;

	}

}

@media screen and (max-width:600px){

	.main,

	.mainSmall {

		width:				calc(100% - 32px);

		margin-left:		16px;

		margin-right:		16px;

	}

	.h-600 {

		height: 			400px;

		width: 				auto;

	}

	.ratio-3-1 {

		aspect-ratio: 		1/1 auto;

	}

	.ratio-3-2 {

		aspect-ratio: 		1/1 auto;

	}

	.ratio-16-9 {

		aspect-ratio: 		1/1 auto;

	}

	.ratio-2-1 {

		aspect-ratio: 		1/1 auto;

	}

}

@media screen and (max-width:480x){

}