@charset "utf-8";

/* pt-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/pt-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/pt-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/pt-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/pt-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/pt-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* pt-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Tonic';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/DF Tonic.ttf') format('truetype'), /* Safari, Android, iOS */
}



html, body {
	margin:0;
	padding:0;
	text-align:center;
	color: #000000; background: #FFFFFF;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	height: 101%;
	line-height: 150%;
	background: linear-gradient(0deg, #F0EDE4, #B0D1A6, #B0D1A6) fixed;
	
	
}


div, img, area, textarea, input {
	outline: none;
}
H1, H2 { margin: 0; padding: 0; padding-bottom: 10px; text-transform: uppercase;}

A {	color: #B00002; text-decoration: none;}
A:hover {	color: #000000;}

UL, LI{ padding: 0; margin: 0}
UL LI {margin-left: 20px;}


.rot {color: #B00002; }
.grau {color: #F0EDE4; }
.gruen {color: #B0D1A6; }
.tuerkis {color: #209E9D; }
.backgruen {background: #B0D1A6; }

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.button {background: #B00002; color: #FFFFFF; padding: 3px 5px; margin-top: 5px; display: inline-block;}
.button:hover {background: #209E9D; color: #FFFFFF}

IMG {max-width: 100%; height: auto;}

TD {font-size: 14px;}

.pagewidth {
	width:  100%; text-align:left; margin-left:auto; margin-right:auto; display: block; position: relative;}


header{background: #F0EDE4 url(images/back-oben.gif); background-size: 100% 100%; display: block;}

header #logo { position: relative;width: 100%; text-align:center;  }
header #logo IMG {width: 100px; margin-top: 15px;}

header #minigolf {text-align: center;}
header #minigolf IMG {width: 150px; margin-top: 15px;}

header #suchen	{text-align: center;}
header #suchen FORM		{padding: 0; margin: 15px 0; display: inline-block;  }
header #suchen input#suchfeld	{ width: 180px; height: 21px; border: 2px solid #FFFFFF;; background: FFFFFF;}	
header #suchen input#suchbutton	{ width: 28px; height: 27px; text-align: center; background: rgb(176,0,2) url(images/lupe-rpt.jpg) no-repeat; border: none; cursor: pointer}						

#maincol INPUT[type='text'] { width: 100%; padding: 3px 0; margin: 5px 0 ;}
#maincol INPUT[type='text']:hover {background: #F0EDE4;}

#maincol INPUT[type='checkbox'] { width: 20px; height: 20px;}

#maincol TEXTAREA {width: 100%; padding: 3px 0; margin: 5px 0}
#maincol TEXTAREA:hover {background: #F0EDE4;}

#maincol INPUT[type='submit'] {cursor: pointer;  border: none;background: #B00002; color: #FFFFFF; padding: 10px 15px; margin-top: 5px; display: inline-block;}
#maincol INPUT[type='submit']:hover {background: #209E9D; color: #FFFFFF}

#menue {background: #B00002; margin-bottom: 5px;}
#but_menue {width: 40px; padding: 5px; margin-left: auto; margin-right: auto; cursor: pointer;}
#but_menue IMG {width: 100%; height: auto;}


NAV {  text-align: center; display: none; padding: 5px;}
NAV UL, NAV LI {	
	margin: 0; 
	padding: 0; 
	list-style-type: none;
}

NAV UL LI A {font-size: 20px; text-transform:uppercase; display: block; padding: 5px 0; color: #B0D1A6;}
NAV UL LI:hover A,  NAV LI.aktiv A {color: #FFFFFF; background: #B00002;}

NAV ul li ul  {display: none; margin-bottom: 25px;;}
NAV ul li:hover ul li a{ color: #B0D1A6 }
NAV ul li ul li a {font-size: 15px; display: block;}
NAV ul li ul li:hover a, NAV ul li ul li a.aktiv{ color: #FFFFFF }	
	nav ul li.aktiv ul LI.aktiv A {color:#FFFFFF;}		

.row {padding: 25px; display: block;}

#leftcol {padding: 25px; background-image: linear-gradient(to bottom, #FFFFFF, #f8f7f2);}
#leftcol H3 {margin:0; padding: 0; line-height: 100%; margin-bottom: 15px;}

#maincol H1 {line-height: 120%}	
#maincol {padding: 25px 25px;}

#rightcol {padding: 10px; text-align: center;  background-image: linear-gradient(to bottom, #FFFFFF, #f8f7f2);}
#rightcol H2 {font-family: Tonic; font-size: 24px; text-transform:none; font-weight: normal;}
.hruler {background: #B0D1A6; height: 3px; margin: 0 auto;}

.einspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.einspalter .spalte1 {width: 100%; display: block;}

.zweispalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.zweispalter .spalte1 {width: 100%; display: block;}
.zweispalter .spalte2 {width: 100%; display: block;}

.dreispalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.dreispalter .spalte1 {width: 100%; display: block;}
.dreispalter .spalte2 {width: 100%; display: block;}
.dreispalter .spalte3 {width: 100%; display: block;}

.vierspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.vierspalter .spalte1 {width: 100%; display: block;}
.vierspalter .spalte2 {width: 100%; display: block;}
.vierspalter .spalte3 {width: 100%; display: block;}
.vierspalter .spalte4 {width: 100%; display: block;}

.fuenfspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.fuenfspalter .spalte1 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte2 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte3 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte4 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte5 {width: 50%; display: block; float: left;}

.sechsspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.sechsspalter .spalte1 {width: 50%; display: block; float: left;}
.sechsspalter .spalte2 {width: 50%; display: block; float: left;}
.sechsspalter .spalte3 {width: 50%; display: block; float: left;clear: both}
.sechsspalter .spalte4 {width: 50%; display: block; float: left;}
.sechsspalter .spalte5 {width: 50%; display: block; float: left;clear: both}
.sechsspalter .spalte6 {width: 48%; display: block; float: left;}

#schnellnavigation img {width: 150px; transition: 1s;}
#schnellnavigation .vierspalter {text-align: center;}
#schnellnavigation img:hover {width: 100px; padding: 25px;}


	

#live {margin-top: 15px; border: 1px solid #019683; background: rgb(240,237,230);}
#live #live_but1 {width: 50%; float: left; color: #019683; font-size: 15px; padding: 5px 0 ; font-weight: bold; text-align: center;}
#live #live_but2 {width: 50%; background: #019683; color: #FFFFFF; float: left; font-size: 13px; padding: 5px 0; font-weight: bold;  text-align: center;}
#live #live_info1 {clear: both;  font-size: 13px; padding: 5px;   }
#live #live_info2 {clear: both;   font-size: 13px; padding: 5px;  display: none;}
#live #live_info1 A {text-decoration: none; color: rgb(176,0,2)}
#live #live_info2 A {text-decoration: none; color: rgb(176,0,2)}


#inhalt {background: #f8f7f2;}

#inhalt #intro #introunten {display: inline-block; margin-top: 20px; }	
#inhalt #intro #introunten H1, #inhalt #intro #introunten H2, #inhalt #intro #introunten H3 {padding: 0; margin: 0; font-size: 15px;}		

#inhalt #intro #introunten #teil1 {
									width:  505px; margin-left: 20px; margin-right: 30px;
									min-height: 250px; padding-top: 5px; padding-bottom: 5px;
									float: left; overfow: hidden;
									color: #000;
									font-size: 12px;
									}
											
#inhalt #intro #introunten #teil1 A {color: rgb(176,0,2); text-decoration: none;}								
#inhalt #intro #introunten #teil1 A:hover{color: rgb(176,0,2); text-decoration: underline;;}									
	

	

footer {display: block; background: #209E9D; color: #FFFFFF; padding: 25px 0 }
footer A {color: #FFFFFF;}

/* #########################################################################################  */
		
		
.clearfix {
	display: block;
	clear: both;
}




/* Tabletts */
@media only screen and (min-width: 660px) {

	.pagewidth { max-width: 760px; }
	#abstand {height: 170px;}
	#fixed {position: fixed; z-index:10000; width: 100%;}
	#menue {border-bottom: 3px solid #B0D1A6;}
	
	header #logo {width: 30%; float: left; text-align: left;}
	header #logo IMG {width: 100px; margin: 15px;}		
	
	header #minigolf {width: 35%; float: left; text-align: center;}	
	header #minigolf IMG {width: 250px;}
	
	header #suchen {width: 35%; float: left; text-align: right;}	
	header #suchen Form {margin: 15px;}
	
		
		
		H1, H2 { margin: 0; padding: 0; padding-bottom: 15px;}	
		
		
		
				
		.einspalter {display: block; position: relative;}
		.einspalter .spalte1 {}
		
		.zweispalter {display: block; position: relative;}
		.zweispalter .spalte1 {width:48%; margin-right: 2%; float: left; display:inline;}
		.zweispalter .spalte2 {width:48%; margin-left: 2%; float: left; display:inline;}
		
		.dreispalter {display: block; position: relative;}
		.dreispalter .spalte1 {width:30.6%; margin-right: 2%; float: left; display:inline;}
		.dreispalter .spalte2 {width:30.6%; margin-left: 2%;margin-right: 2%; float: left; display:inline;}
		.dreispalter .spalte3 {width:30.6%; margin-left: 2%; float: left; display:inline;}	
		
		.vierspalter {display: block; position: relative;}
		.vierspalter .spalte1 {width: 48%; margin-right: 2%; float: left; display:inline;}
		.vierspalter .spalte2 {width: 48%; margin-left: 2%;float: left; display:inline;}
		.vierspalter .spalte3 {width: 48%; margin-right: 2% ;float: left; display:inline; clear: both;}
		.vierspalter .spalte4 {width: 48%; margin-left: 2%;float: left; display:inline;}
		
		.fuenfspalter {display: block; position: relative;}
		.fuenfspalter .spalte1 {width: 33%; display: block; float: left;}
		.fuenfspalter .spalte2 {width: 34%; display: block; float: left;}
		.fuenfspalter .spalte3 {width: 33%; display: block; float: left;}
		.fuenfspalter .spalte4 {width: 33%; display: block; float: left;}
		.fuenfspalter .spalte5 {width: 34%; display: block; float: left;}

		.sechsspalter {display: block; position: relative;}
		.sechsspalter .spalte1 {width: 33%; display: block; float: left;}
		.sechsspalter .spalte2 {width: 34%; display: block; float: left;}
		.sechsspalter .spalte3 {width: 33%; display: block; float: left; clear: inherit}
		.sechsspalter .spalte4 {width: 33%; display: block; float: left;clear: both}
		.sechsspalter .spalte5 {width: 34%; display: block; float: left;clear: inherit}
		.sechsspalter .spalte6 {width: 33%; display: block; float: left;}		
		
		footer {font-size: 14px;}
		footer .spalte2 {text-align: center;}
		footer .spalte3 {text-align: right;}
		
}

/* Mittlere Gr��e */
@media only screen and (min-width: 960px)  {

	.pagewidth { max-width: 960px; }
	#abstand {height: 180px;}
	
	header #logo IMG {width: 120px; margin: 25px 0;}		
	header #minigolf IMG {width: 300px; margin: 25px 0;}
	header #suchen {width: 35%; float: left; text-align: right;}	
	header #suchen Form {margin: 25px 0;}

	
	#but_menue {display: none;}
		
	NAV {display: block; height: 29px; text-align: left; padding: 0;}
	nav ul{ list-style-type:none; margin:0; padding:0; display: inline-block}
	nav ul li { float:left; padding:0; margin:0;}
	nav ul li.aktiv A{ background: #FFFFFF; color: #B00002;}
	NAV UL LI A { display:block; text-align:center;  text-decoration:none;  font-size: 13px; padding: 3px 8px 2px 8px ;}
	
	nav ul li ul {  position:absolute; z-index:999; overflow:hidden; border-top: none; background: #B00002; padding: 10px 0;  padding-top:5px;}
	nav ul li ul li { clear: both;  display: block;text-align: left; width: 100%;  color: #FFFFFF;}
	NAV UL LI ul LI A { display:block; text-align:left;  font-size: 13px; margin: 0; padding: 5px;}
	nav ul li ul LI:hover  A, nav ul li.aktiv ul LI A {background: #B00002;}
	nav ul li.aktiv ul LI.aktiv A {color:#FFFFFF;}

	
	H1, H2 { margin: 0; padding: 0; padding-bottom: 20px;}		

	#leftcol {width: 14%; float: left; padding: 5px 1%;}
	#maincolstart {width: 84%; float: left;}
	#maincol {width: 66%; padding: 25px 1%; float: left;}

	#rightcol {width: 14%; float: left; padding: 5px 1%;}


	
	
	.vierspalter {display: block; position: relative;}
	.vierspalter .spalte1 {width: 23%; margin-right: 2%; float: left; display:inline;}
	.vierspalter .spalte2 {width: 23%; margin-left: 1%; margin-right: 1%;float: left; display:inline;}
	.vierspalter .spalte3 {width: 23%;  margin-left: 1%; margin-right: 1%;display:inline; clear: inherit;}
	.vierspalter .spalte4 {width: 23%; margin-left: 2%;float: left; display:inline;}
	
	
	.fuenfspalter .spalte1 {width: 20%; display: block; float: left;}
	.fuenfspalter .spalte2 {width: 20%; display: block; float: left;}
	.fuenfspalter .spalte3 {width: 20%; display: block; float: left;}
	.fuenfspalter .spalte4 {width: 20%; display: block; float: left;}
	.fuenfspalter .spalte5 {width: 20%; display: block; float: left;}	
	
	.sechsspalter .spalte1 {width: 16.66%; display: block; float: left;}
	.sechsspalter .spalte2 {width: 16.66%; display: block; float: left;}
	.sechsspalter .spalte3 {width: 16.66%; display: block; float: left;}
	.sechsspalter .spalte4 {width: 16.66%; display: block; float: left;clear: inherit}
	.sechsspalter .spalte5 {width: 16.66%; display: block; float: left;}		
	.sechsspalter .spalte6 {width: 16.66%; display: block; float: left;}			
	
		
	#teaser {display: block;}

	footer {font-size: 16px;}
		

	
}

/* Gro�e Monitore */
@media only screen and (min-width: 1280px)  {

	.pagewidth { max-width: 1280px; }
	
	#abstand {height: 205px;}
		
	header #logo IMG {width: 150px;}		
	header #minigolf IMG {width: 350px;}
	header #suchen {width: 35%; float: left; text-align: right;}	

		

	NAV {display: block; height: 34px;}
	NAV UL LI A {font-size: 16px;  padding: 5px 14px 5px 14px; }
	NAV UL LI ul LI A { font-size: 16px;}
	
	footer {font-size: 18px;}
	
}