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

@font-face 							{	font-family: 		'Eigene Schrift';
										src: 				url(fonts/BubblerOne-Regular.ttf) 		format('truetype'), 
		 													url(fonts/BubblerOne-Regular.woff) 		format('woff'), 
		 													url(fonts/BubblerOne-Regular.otf) 		format('otf'), 
															url(fonts/BubblerOne-Regular.eot) 		format('eot')}

	body 							{	background-color: 	#015647;
										/*Schrift*/
										font-family: 		'Eigene Schrift';
										color: 				white;
										text-align: 		center;
										font-weight: 		normal}

	main 							{	display: 			flex;
										flex-flow: 			row wrap;
										justify-content: 	center;
										align-items: 		center}

	footer 							{	display: 			flex;
										flex-flow: 			row wrap;
										justify-content: 	center;
										align-items: 		center}

	.impressum						{	text-align: 		center}
							
	.overlay 						{	display: 			none;
										position: 			fixed;
  										visibility: 		hidden;
  										opacity: 			0}

	.overlay:target					{	display: 			flex;
										top: 				0;
  										bottom: 			0;
 										left: 				0;
			  							right: 				0;
  										background: 		rgba(0, 0, 0, 0.3);
  										transition: 		opacity 500ms;
  										visibility: 		visible;
  										opacity: 			1}

	.popup							{	background: 		#015647;
										position: 			relative;
										transition: 		all 5s ease-in-out;
										text-align: 		justify;
										hyphens: 			auto}
								
	.popup .close 					{	position: 			absolute;
 	 									top: 				20px;
 										right: 				20px;
  										transition: 		all 200ms;
  										font-size: 			30px;
  										font-weight: 		bold;
  										text-decoration: 	none;
  										color: 				white}
		
	.popup .content 				{	display: 			flex;
										flex-flow: 			row wrap;
										justify-content: 	center;
										align-items: 		center;
										max-height: 		100%;
  										overflow: 			auto}

	.img_kontakt					{	margin: 			10px 5px}

	.form							{	background: 		#015647;
										position: 			relative;
										transition: 		all 5s ease-in-out;
										text-align: 		center}

	.form .close 					{	position: 			absolute;
 	 									top: 				20px;
 										right: 				20px;
  										transition: 		all 200ms;
  										font-size: 			30px;
  										font-weight: 		bold;
  										text-decoration: 	none;
  										color: 				white}
		
	.form .content 					{	display: 			flex;
										flex-flow: 			row wrap;
										justify-content: 	center;
										align-items: 		center;
										max-height: 		100%;
										overflow: 			auto}

	.contact-form-text 				{	width: 				100%;
  										box-sizing: 		border-box;
  										border: 			0;
  										background: 		white;
  										outline: 			none;
  										color: 				#015647;
  										transition: 		0.5s;
										/*Schrift*/
										font-family: 		'Eigene Schrift';}

	textarea 						{	resize: 			none;
  										height: 			150px}

	.contact-form-btn 				{	float: 				right;
  										border: 			0;
  										background: 		white;
  										color: 				#015647;
  										padding: 			12px 30px;
										border-radius: 		50px;
  										cursor: 			pointer;
  										transition: 		0.5s;
										/*Schrift*/
										font-family: 		'Eigene Schrift';}

	.contact-form-btn:hover 		{	color: 				white;
										background: 		#015647;
										/*Rahmen*/
										border: 			white 1px solid}

	.form_danke						{	background: 		#015647;
										position: 			relative;
										transition: 		all 5s ease-in-out;
										/*Schrift*/
										font-family: 		'Eigene Schrift';
										color: 				white;
										text-align: 		center;
										font-weight: 		bolder}		

	.img_facebook					{	margin: 			10px 5px}

	.img_instagram					{	margin: 			10px 5px}

	.img_gallery 					{	width: 				150px;
										height: 			100px;
										object-fit: 		cover;
										object-position: 	top}

	.img_medien						{	width: 				200px;
										height: 			160px}

	

/* -------------------------------------------------- */
/* ---------- Handys ---------- */
/* -------------------------------------------------- */

@media (max-width: 480px) {
	
	body 							{ 	font-size: 			15px;
										line-height: 		25px;
										letter-spacing: 	2px}

	.header_img 					{	max-width: 			85%;
										height: 			200px;
										object-fit: 		cover;
										object-position: 	top;
										margin: 			5px 10px;
										/*Rahmen*/
										border: 			white 1px solid}

	nav 							{	margin-top: 		10px;
										margin-bottom: 		10px;
										padding: 			7px 10px;
										cursor: 			pointer;
										/*Rahmen*/
										border: 			white 1px solid}
	
	.menue							{	overflow: 			hidden;
										font-weight: 		bold}
	
	.menue a 						{	float: 				center;
										display: 			inline;
										color: 				white;
										margin-right: 		3px;
  										padding: 			2px 5px;
  										text-decoration: 	none}
	
	.menue a:hover 					{	background-color: 	white;
  										color: 				#015647}
	
	.menue a.active 				{	background-color: 	white;
  										color: 				#015647}
	
	.main_home						{	max-width: 			85%;
										margin: 			0px 10px}

	.main_img						{	max-width: 			85%;
										height: 			250px;
										object-fit: 		cover;
										object-position: 	top;
										margin: 			30px 10px;
										/*Rahmen*/
										border: 			white 1px solid}
	
	.main_img2						{	height: 			250px;
										object-fit: 		cover;
										margin: 			0px 10px;
										/*Rahmen*/
										border: 			white 1px solid}
	
	.main_news1						{	margin-bottom: 		10px;
										padding: 			10px 5px;
										/*Rahmen*/
										border: 			white 1px solid}
	
	.main_news2						{	display: 			flex;
										flex-flow: 			row wrap;
										justify-content: 	center;
										align-items: 		flex-start}
	
	.article 						{	max-width: 			250px;
										margin: 			10px 5px;
										padding: 			5px 10px}
	
	.link 							{	font-size: 			15px;
										line-height: 		25px;
										letter-spacing: 	2px;
										color: 				white;
										text-decoration: 	none;
										cursor: 			pointer;
										transition: 		all 0.3s ease-out}
	
	.impressum						{	width: 				100%;
										margin: 			5px 0px}
	
	.popup							{	width: 				70%;
										margin: 			30px auto;
  										padding: 			30px 30px;
										/* Rahmen */
										border: 			white 1px solid}
	
	.popup .close 					{	top: 				30px;
 										right: 				20px;
  										font-size: 			25px;}
	
	.form 							{	width: 				70%;
										margin: 			30px auto;
  										padding: 			30px 30px;
										/* Rahmen */
										border: 			white 1px solid}

	.form .close 					{	top: 				10px;
 										right: 				10px;
  										font-size: 			25px}
	
	.contact-form-text 				{	margin: 			10px 0px;
 										padding: 			10px 20px;
  										/*Schrift*/
										font-size: 			15px;
										font-weight: 		bold;
										line-height: 		5px;
										letter-spacing: 	2px}
	
	.form_danke						{	font-size: 			15px;
										line-height: 		25px;
										letter-spacing: 	2px}

	.form_img						{	height: 			250px;
										object-fit: 		cover;
										margin: 			5px 5px;
										/*Rahmen*/
										border: 			white 1px solid}
	
	table 							{	width: 				90%;
										margin: 			10px 10px;
										border-collapse: 	separate; 
										border-spacing: 	10px}
	
	caption 						{	padding: 			5px;
										/*Schrift*/
										font-weight: 		bold;
										font-size: 			18px;
										/*Rahmen*/
										border: 			white 1px solid}
	
	th 								{	font-style: 		italic;
										width: 				auto;
										padding: 			2px 0px}
	
	td 								{	vertical-align: 	top;
										height: 			50px;
										padding: 			0px 0px}
	
	.header_gallery					{	width: 				85%}
	
	.gallery 						{	width: 				85%;
										margin: 			10px}
	
	.img_gallery					{	/*Rahmen*/
										border: 			white 1px solid}
	
 }



/* -------------------------------------------------- */
/* ---------- Tablets ---------- */
/* -------------------------------------------------- */

@media (min-width: 481px) and (max-width: 1024px) {	
	
	body 							{ 	font-size: 			18px;
										line-height: 		25px;
										letter-spacing: 	2px}

	.header_img						{	max-width: 			90%;
										height: 			350px;
										object-fit: 		cover;
										object-position: 	top;
										margin: 			5px 10px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	nav 							{	margin-top: 		15px;
										margin-bottom: 		15px;
										padding: 			12px 20px;
										cursor: 			pointer;
										/*Rahmen*/
										border: 			white 2px solid}
	
	.menue							{	overflow: 			hidden;
										font-weight: 		bold}
	
	.menue a 						{	float: 				center;
										display: 			inline;
										color: 				white;
										margin-right: 		5px;
  										padding: 			4px 7px;
  										text-decoration: 	none}
	
	.menue a:hover 					{	background-color: 	white;
  										color: 				#015647}
	
	.menue a.active 				{	background-color: 	white;
  										color: 				#015647}
	
	.main_home						{	max-width: 			50%;
										margin: 			0px 10px}
	
	.main_img						{	max-width: 			80%;
										height: 			350px;
										object-fit: 		cover;
										object-position: 	top;
										margin: 			40px 10px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	.main_img2						{	height: 			350px;
										object-fit: 		cover;
										margin: 			20px 20px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	.main_news1						{	margin-bottom: 		15px;
										padding: 			10px 5px;
										/*Rahmen*/
										border: 			white 2px solid}

	.main_news2						{	display: 			flex;
										flex-direction: 	row;
										flex-wrap: 			wrap;
										justify-content: 	center;
										align-items: 		flex-start}
	
	.article 						{	max-width: 			300px;
										margin: 			10px 5px;
										padding: 			5px 10px}
	
	.link 							{	font-size: 			18px;
										line-height: 		25px;
										letter-spacing: 	2px;
										color: 				white;
										text-decoration: 	none;
										cursor: 			pointer;
										transition: 		all 0.3s ease-out}
	
	.impressum						{	width: 				100%;
										margin: 			5px 0px}
	
	.popup							{	width: 				85%;
										margin: 			20px auto;
  										padding: 			30px 30px;
										/* Rahmen */
										border: 			white 2px solid}
	
	.popup .close 					{	top: 				15px;
 										right: 				15px;
  										font-size: 			20px;}

	.form							{	width: 				50%;
										margin: 			20px auto;
  										padding: 			30px 30px;
										/* Rahmen */
										border: 			white 2px solid}

	.form .close 					{	top: 				15px;
 										right: 				15px;
  										font-size: 			20px}
	
	.contact-form-text 				{	margin: 			20px 0px;
 										padding: 			10px 20px;
  										/*Schrift*/
										font-size: 			18px;
										font-weight: 		bold;
										line-height: 		15px;
										letter-spacing: 	2px}
	
	.form_danke						{	font-size: 			18px;
										line-height: 		25px;
										letter-spacing: 	2px}

	.form_img						{	height: 			350px;
										object-fit: 		cover;
										margin: 			10px 10px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	table 							{	width: 				90%;
										margin: 			20px 10px;
										border-collapse: 	separate; 
										border-spacing: 	20px}
	
	caption 						{	padding: 			5px;
										/*Schrift*/
										font-weight: 		bold;
										font-size: 			20px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	th 								{	font-style: 		italic;
										width: 				auto;
										padding: 			4px 7px}
	
	td 								{	vertical-align: 	top;
										height: 			60px;
										padding: 			0px 5px}
	
	.header_gallery					{	width: 				90%}
	
	.gallery 						{	width: 				90%;
										margin: 			20px}
	
	.img_gallery					{	/*Rahmen*/
										border: 			white 2px solid}
}



/* -------------------------------------------------- */
/* ---------- Desktops and Laptops ---------- */
/* -------------------------------------------------- */

@media (min-width: 1025px) {	
	
	body 							{	font-size: 			20px;
										line-height: 		30px;
										letter-spacing: 	3px}

	.header_img 					{	max-width: 			95%;
										height: 			500px;
										object-fit: 		cover;
										object-position: 	top;
										margin: 			5px 10px;
										/*Rahmen*/
										border: 			white 2px solid}
		
	nav 							{	margin-top: 		20px;
										margin-bottom: 		20px;
										padding: 			15px 30px;
										cursor: 			pointer;
										/*Rahmen*/
										border: 			white 2px solid}
	
	.menue							{	overflow: 			hidden;
										font-weight: 		bold}
	
	.menue a 						{	float: 				center;
										display: 			inline;
										color: 				white;
										margin-right: 		7px;
  										padding: 			6px 9px;
  										text-decoration: 	none}
	
	.menue a:hover 					{	background-color: 	white;
  										color: 				#015647}
	
	.menue a.active 				{	background-color: 	white;
  										color: 				#015647}
	
	.main_home						{	max-width: 			50%;
										margin: 			0px 10px}
	
	.main_img						{	max-width: 			95%;
										height: 			450px;
										object-fit: 		cover;
										object-position: 	top;
										margin: 			50px 10px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	.main_img2						{	height: 			450px;
										object-fit: 		cover;
										margin: 			30px 30px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	.main_news1						{	margin-bottom: 		20px;
										padding: 			10px 5px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	.main_news2						{	display: 			flex;
										flex-direction: 	row;
										flex-wrap: 			wrap;
										justify-content: 	center;
										align-items: 		flex-start}
	
	.article 						{	max-width: 			400px;
										margin: 			10px 10px;
										padding: 			0px 20px;}
	
	.link 							{	font-size: 			20px;
										line-height: 		30px;
										letter-spacing: 	3px;
										color: 				white;
										text-decoration: 	none;
										cursor: 			pointer;
										transition: 		all 0.3s ease-out}
	
	.impressum						{	width: 				100%;
										margin: 			5px 0px}
							
	.popup							{	width: 				80%;
										margin: 			20px auto;
  										padding: 			50px 50px;
										/* Rahmen */
										border: 			white 2px solid}
	
	.popup .close 					{	top: 				20px;
 										right: 				20px;
  										font-size: 			30px;}
	
	.form							{	width: 				50%;
										margin: 			20px auto;
  										padding: 			50px 50px;
										/* Rahmen */
										border: 			white 2px solid}

	.form .close 					{	top: 				20px;
 										right: 				20px;
  										font-size: 			30px}
	
	.contact-form-text 				{	margin: 			20px 0px;
 										padding: 			10px 20px;
  										/*Schrift*/
										font-size: 			20px;
										font-weight: 		bold;
										line-height: 		25px;
										letter-spacing: 	3px}
	
	.form_danke						{	font-size: 			20px;
										line-height: 		30px;
										letter-spacing: 	3px}

	.form_img						{	height: 			450px;
										object-fit: 		cover;
										/*Rahmen*/
										border: 			white 2px solid}
	
	
	table 							{	width: 				90%;
										margin: 			20px 10px;
										border-collapse: 	separate; 
										border-spacing: 	20px}
	
	caption 						{	padding: 			5px;
										/*Schrift*/
										font-weight: 		bold;
										font-size: 			22px;
										/*Rahmen*/
										border: 			white 2px solid}
	
	th 								{	font-style: 		italic;
										width: 				auto;
										padding: 			6px 9px}
	
	td 								{	vertical-align: 	top;
										height: 			70px;
										padding: 			0px 5px}
	
	.header_gallery					{	width: 				95%}
	
	.gallery 						{	width: 				95%;
										margin: 			30px}
	
	.img_gallery					{	/*Rahmen*/
										border: 			white 2px solid}
	}