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


   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

-------------------------------------------------------------- */

label       { font-weight: 200;}
fieldset    { padding:1.3em; margin: 0 0 1.2em 0; border: 1px solid #ccc; }
legend      { font-weight: normal; font-size:1.0em; color:#ccc;}





/* Form fields
-------------------------------------------------------------- */


input, input[type=text], input[type=password],
input.text, input.title,
textarea, select {
  background-color:#fff;
  border:1px solid #bbb;
  margin-bottom:12px;
}
input, input[type=text]:focus, input[type=password]:focus,
input.text:focus, input.title:focus,
textarea:focus, select:focus {
  border-color:#666;
}

textarea{
font-size: 16px;
overflow:hidden;
margin:6px 0 0 0;
}

h1 input,
h2 input,
input.text,
input.title   { width: 250px; padding:5px; }
input.title   { font-size:1.2em; }
textarea      { width: 395px; height: 200px; padding:5px; }

input[type=radio], input.radio {
  position:relative; top:.25em;
}

input[type=checkbox], input.checkbox{
	margin:0 0 12px 0;
}

form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, notice and error boxes
-------------------------------------------------------------- */

.error,
.notice,
.success    { padding: .8em; margin-bottom: 0em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #ff7b00; }




/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://creativecommons.org/licenses/MIT/	*/


/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

.left{float:left !important;}
.right{float:right !important;}


/*	Typography presets
	------------------	*/


  
.gigantic {
	font-size: 110px;
	line-height: 120px;
	letter-spacing: -2px;
}

.huge, h1 {
	font-size: 68px;
	line-height: 72px;
	letter-spacing: -1px;
}

.large, h2 {
	font-size: 15px;
	line-height: 20px;
	font-weight:100;
	/*	text-transform:uppercase;*/
}

.bigger, h3 {
	font-size: 26px;
	line-height: 36px;
}

.big, h4 {
	font-size: 22px;
	line-height: 30px;
}

body {
	font: 16px/24px arial;
	height: 100%; 
  	width: 100%; 
}

.small, small { 
	font-size: 13px;
	line-height: 18px;
	}

.description	{
	font-size:1em;
	line-height: 24px;
	text-transform:none;
	letter-spacing:none;
	font-weight:100;
	}

.description .hl, .description .hlbig 	{
	color:#ff7b00;
	text-transform:uppercase;
	font-weight:bold;
	}

.description .hl 	{
	font-size:1em;
	line-height: 16px;
	letter-spacing:0.2em;
	}

.description a img   {
	margin:0 16px 0 0px;		
	}

.description .hlbig 	{
	font-size:1.8em;
	line-height: 42px;
	letter-spacing:0.16em;
	padding:52px 0 0 0;
	}

.description a	{
	text-decoration:underline;
	color:#ff7b00;
	}

.description a:visited, .description a:link	{
		-webkit-transition:all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

.description a:hover	{
	color:#ff7b00;
	text-decoration:none;
	}

.nachoben {
	float:right;
	font-size:0.8em;	
	}
		

	
.exp	{
	font-size:0.9em;
	text-transform:none;
	letter-spacing:none;
	font-weight:100;
	}
	
.line	{
	vertical-align:middle;
	margin:2px 0 5px 40px;
}

.expsingle	{
	display: inline;
}

.exptext	{
	float:left;
	padding-left:14px;
	width:216px;
	font-size:0.9em;
	text-transform:none;
	letter-spacing:none;
	font-weight:100;
	list-style:none;
}

.exptext ul li	{
	line-height:1.5em;
}

.expimg{
	margin:8px 0 0px 0;
}


#method	{
	padding:12px 0 0 0;
}

.life	{
	float:left;
	padding: 4px 10px 0 0;
}

#mobi {
	display:none;
}
	
	
/* Selection colours (easy to forget) */

::selection 	 	{background: #ff7b00;}
::-moz-selection 	{background: #ff7b00;}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: #ff7b00;}

.slideshow3 { position: relative;display:block;float:left;width: 200px; height: 163px; margin: 0 12px 5px 10px;}
.slideshow3 li { position: absolute; left: 0; top: 0; width: 200px; height: 163px; display: none; list-style: none; }
.slideshow3 li:first-child { display: block; }

/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

	
body {
	padding: 60px 0 84px;
	background: rgb(255,255,255);
	color: rgb(60,60,60);
	font-family: "ff-unit-web-1", "ff-unit-web-2",sans-serif;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	overflow:auto;
	}

#bg-pattern { background:url('../img/bg.png') repeat fixed; position:fixed; top:0; left:0; z-index:-1; width:100%; min-height:100%; }

#wrapper{
	width: 896px; 
	position: relative;
	margin: 0 auto;
	padding: 2px 0px 5px;
	z-index:1;
	overflow:hidden;
	}

::selection 	 {background: #ff7b00;}
::-moz-selection {background: #ff7b00;}

a:link, a:visited, a img {
	text-decoration: none;
	color: #111;
	font-weight:normal;
	}

	
.opacity a:hover, .opacity a img:hover {
	opacity: 1;
	}

a:focus{
	outline:none;
	}

.block, .block1, .block2	{
	width:612px;
	float:right;
	margin:0 15px 15px 0;
	overflow:hidden;
	background-color: rgba(255,255,255,0.8);
	padding:0 0 8px 0;
	}

.block3	{
	width:762px;
	position:static;
	overflow:hidden;
	background-color: rgba(255,255,255,0.8);
	z-index:1;
	}

.block2	{
	display:none;
	}


.block .button{
	font-size:13px;
	background: url(../img/60x60px_bulp_t3.png) no-repeat -9999px -9999px;
	}

.block .action{
	font-size:26px;
	background: url(../img/60x60px_pm_t3.png) no-repeat -9999px -9999px;
	}

header, .block article, .block1 article, .block2 article, .block3 article	{
	margin:20px 10px 10px 20px;
	}

article	{
	position:relative;
	z-index:1;
	background: url(../img/60x60px_change_t3.png) no-repeat -9999px -9999px;
	}

article img {
	width: 100%;
}

article .slideshow, article .slideshow2 {
	margin-right: 16px;
}	

.borderradius .block, .borderradius .block1, .borderradius .block2, .borderradius .error, .borderradius #flash_success, .borderradius #flash_notice, .borderradius #flash_alert, .borderradius #flash_error{
/*	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;*/
	-webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.25);
	-moz-box-shadow: 2px 3px 5px rgba(0,0,0,.25);
	box-shadow: 2px 3px 5px rgba(0,0,0,.25);
	}

hr.space{
	background:none repeat scroll 0 0 #FFFFFF;
	clear:both;
	color:#FFFFFF;
	visibility:hidden;
	}

/* BUTTON CLASS */

a:link,
a:visited, a img, a img:hover, a img.hover {
	-webkit-transition: opacity .4s ease;
	-moz-transition: opacity .2s ease;
	-o-transition: opacity .2s ease;
	-ms-transition: opacity .2s ease;
	transition: opacity .2s ease;
	}



.opacity .button:hover, .opacity .action:hover {
	opacity: 1;
	}

.no-opacity a:hover {
	text-decoration:underline;
	}

article img{
	margin:0 16px 0px 0;
	}		

article ul li{
	margin:0px 12px 0 0;
	list-style: square; 
	color:#ff7b00;
	}
	
	
a:focus	{
	outline:none;
	}

#formstate {
	padding:8px 8px 12px 12px;
	}

a #formpic	{
	background-image:url(../img/email.png);
	height:90px;
	width:110px;
	-webkit-transition:all 0.2s ease-in-out;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		-ms-transition: all .2s ease;
		transition: all .2s ease;	
		}
	
a #formpic:hover	{
	background-image:url(../img/emailhover.png);
	-webkit-transition:all 0.2s ease-in-out;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		-ms-transition: all .2s ease;
		transition: all .2s ease;
	}

.cssgradients a.button, .cssgradients input.button, .cssgradients	.btn{
	background:-webkit-gradient(linear,0% 0%,0% 100%,from(#E8E7E7),to(#BEBFC2));
	background:-moz-linear-gradient(top, #E8E7E7, #BEBFC2);
	}

.no-cssgradients a.button, .no-cssgradients input.button, .no-cssgradients	.btn{
	background:#efefef;
	}

.textshadow a.button, .textshadow input.button, .textshadow	.btn{
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	}

.rgba a.button, .rgba input.button,	.rgba .btn{
border:1px solid rgba(0,0,0,0.4);
}

/*.borderradius a.button, .borderradius input.button .borderradius input, .borderradius .btn, .borderradius .button {
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
}

.boxshadow a.button, .boxshadow input.button, .boxshadow	.btn{
	-moz-box-shadow: 0 0 0 1px #2C7CD1 inset, 0 1px 0 1px rgba(143, 228, 255, 0.6) inset, 0 28px 20px -18px rgba(143, 228, 255, 0.65) inset, 0 0 0 2px #2F94FF inset, 0 1px 0 0 rgba(255, 255, 255, 0.6)
		-webkit-box-shadow:0 0 0 1px #2C7CD1 inset, 0 1px 0 1px rgba(143, 228, 255, 0.6) inset, 0 28px 20px -18px rgba(143, 228, 255, 0.65) inset, 0 0 0 2px #2F94FF inset, 0 1px 0 0 rgba(255, 255, 255, 0.6)
}*/

a.button:hover, input.button:hover, .button:hover {
	color:#000;
	cursor:pointer;
	}

.cssgradients a.button:hover, .cssgradients input.button:hover, .cssgradients	.btn:hover{
	background:-webkit-gradient(linear,0% 0%,0% 100%,from(#BEBFC2),to(#E8E7E7));
	background:-moz-linear-gradient(top, #BEBFC2, #E8E7E7);
	}

.no-cssgradients a.button:hover, .no-cssgradients input.button:hover, .no-cssgradients	.btn:hover{
	background:#676767;
	}

/* CALL TO ACTION */
.cssgradients a.action, .cssgradients input.action, .cssgradients	.action{
	background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFC100),to(#FF8B00));
	background:-moz-linear-gradient(top, #FFC100, #FF8B00);
	}

.no-cssgradients a.action, .no-cssgradients input.action, .no-cssgradients	.action≈

.cssgradients a.action:hover, .cssgradients input.action:hover, .cssgradients	.action:hover{
	background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FF8B00),to(#FFC100));
	background:-moz-linear-gradient(top, #FF8B00, #FFC100);
	}

.no-cssgradients a.action:hover, .no-cssgradients input.action:hover, .no-cssgradients	.action:hover{
	background:#FF8B00;
	}

#smallbig {
	display:none;
	}

.leist {
	display:block;
	}
	
.leistung {
	display:inline;
	width:230px;
	margin:0 12px 6px 1px;
	}
	
.leistung img{
	width:60px;
	margin-left:0px;
	}

.block3	.description .leistung {
	display:block;
	width:auto;
	margin:0 12px 12px 0px;
	text-align:center;
	}

a .leistrat {
	display:block;
	background: url(../img/60x60px_flash.png);
	height:60px;
	width:60px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    margin-bottom: 10px;
	}

a .leistrat:hover, a .leistrat.hover {
 	background: url(../img/60x60px_flash_t3.png);
		opacity: 1;
	}

a .leipm {
	display:block;
	background: url(../img/60x60px_pm.png);
	height:60px;
	width:60px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    margin-bottom: 10px;
	}

a .leipm:hover, a .leipm.hover {
 	background: url(../img/60x60px_pm_t3.png);
		opacity: 1;
	}

a .leich {
	display:block;
	background: url(../img/60x60px_pm.png);
	height:60px;
	width:60px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    margin-bottom: 10px;
	}

a .leich:hover, a .leich.hover {
 	background: url(../img/60x60px_pm_t3.png);
		opacity: 1;
	}

a .leicr {
	display:block;
	background: url(../img/60x60px_bulp.png);
	height:60px;
	width:60px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    margin-bottom: 10px;
	}

a .leicr:hover, a .leicr.hover {
 	background: url(../img/60x60px_bulp_t3.png);
		opacity: 1;
	}

a .leicc {
	display:block;
	background: url(../img/60x60px_change.png);
	height:60px;
	width:60px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    margin-bottom: 10px;
	}

a .leicc:hover, a .leicr.hover {
 	background: url(../img/60x60px_change_t3.png);
		opacity: 1;
	}

.description .head {
	margin:8px 0px 10px 0px;
	}
	
.leitext {
	text-align:left;
	}
		
.block3 .description	{
	color:#000;
	font-size:0.9em;
	line-height: 20px;
	text-transform:none;
	letter-spacing:none;
	font-weight:100;
	padding:0 0 0px 0;
	}	
	
.leistung ul{	
	margin:0px 0px 20px 0px;
	color:#000;
	}
	
.leistung ul li {	
	margin:0px 0px 0 14px;
	color:#000;
	list-style-image: square; 
	}
		
.head {
	font-weight:bold;
	text-align:center;
		margin:0 0 12px 0;
	}
	
	
#impress 	{
	margin-bottom:430px;
	}
	
.foo	{
	position: fixed; 
  	bottom: 0px !important; 
	width:100%;
	z-index:40;
	-webkit-tap-highlight-color:transparent;
		background-color: rgb(0,0,0);	
		background-color: rgba(0,0,0,0.6);
		background-color: transparent\8; /* Hide solid background for IE8 */
		filter:progid:DXImageTransform.Microsoft.gradient( 
		startColorstr=#9C000000,endColorstr=#9C000000); /* IEs */
		zoom:1;
	}

#bott	{
	width: 896px; 
	position: relative;
	margin: 0 auto;
	padding: 0 0 0 0;
	z-index:50;
	overflow:hidden;
	}
		
.subnavi, .subnavi a	{
	width:80px;
	color:#fff;
	float:left;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	margin: 2px 0px 0px 2px;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	-ms-transition: all .2s ease;
	transition: all .2s ease;
	}

.subnavi a:hover	{
	color:#ff7b00;
	-webkit-transition:all 0.2s ease-in-out;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		-ms-transition: all 0.2s ease;
		transition: all .2s ease;
	}

	
.copyright	{
	color:#fff;
	float:left;
	padding: 4px 28px 5px 118px;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	}	

.copyright_plus	{
	float:left;
	padding: 4px 28px 5px 284px;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	color:#fff;
	}	


/* ---------------------------------------------------------- Navi ----------------------------------------------*/
		
#nav, #nav1, #navsec	{
		position:fixed;
		width:280px;
		}
		
#nav ul, #nav1 ul, #nav3 ul, #navsec ul	{
		position:relative;
		z-index:40;
		list-style-type:none;
		float:left;
		margin-top:0px;
		margin-left:0px;
		}

#nav ul li, #nav1 ul li, , #navsec ul li			{
		margin-left:0px;
		}

#navsec ul li a,#navsec ul li a:link,#navsec ul li a:visited	, #nav ul li a,#nav ul li a:link,#nav ul li a:visited	, #nav1 ul li a,#nav1 ul li a:link,#nav1 ul li a:visited, #nav3 ul li a,#nav3 ul li a:link,#nav3 ul li a:visited	{
		background-color: rgb(80,80,80);
		background-color: rgba(0,0,0,0.6);
		padding:2px 30px 8px 8px;
		letter-spacing:0.1em;
		text-transform:uppercase;
		font-size:12px;
		line-height:29px;
		margin-bottom:20px;
		color:#fff;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		transition: all 0.3s ease;		
		}
		
#navsec ul li a:hover,#navsec ul li a:focus, #nav ul li a:hover,#nav ul li a:focus, #nav1 ul li a:hover,#nav1 ul li a:focus, #nav3 ul li a:hover,#nav3 ul li a:focus, #navsec ul li a:hover,#navsec ul li a:focus, #nav ul li a:hover 	{
		color:#fff;
		background-color:#ff7b00;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		transition: all 0.2s ease;		
		}
		
#navsec ul li a:active, #navsec ul li #active, #nav ul li a:active, #nav ul li #active, #nav1 ul li a:active, #nav1 ul li #active, #nav3 ul li a:active, #nav3 ul li #active	{
		color:#fff;
		background-color:#ff7b00;
		padding:2px 30px 8px 8px;
}

#nav ul li a.kombeactive:visited, #nav ul li a.kombeactive:link, #navsec ul li a.kombeactive:visited, #navsec ul li a.kombeactive:link, #nav1 ul li a.kombeactive:visited, #nav1 ul li a.kombeactive:link, #nav3 ul li a.kombeactive:visited, #nav3 ul li a.kombeactive:link	{
		background-color: rgb(80,80,80);
		background-color: rgba(0,0,0,0.6);
		padding:2px 30px 8px 8px;
}

#nav ul li a.kombeactive:hover		{
		background-color:#ff7b00;
		padding:2px 30px 8px 8px;
}

#navsec ul li, #nav ul li, #nav1 ul li, #nav3 ul li	{
		color:#fff;
		}
				
#nav3 {
		display:none;
		}

#navsec {
		position:relative;
		}
		
			
.dcol	{
	float:right;
	border:1px solid #a1a1a1;
	width:300px;
	padding:10px;
	}	


.matt	{
	float:left;
	border:none;
	width:110px;
	padding:3px 20px 0px 0;
	}	
	
	

	
/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

	@media only screen and (min-width: 768px) and (max-width: 991px) {
	/* Hier der CSS-Codefür Netbooks und kleinere Screens */	
	body {
	background: rgb(255,255,255);
		margin: 0 auto;
		padding: 60px 0 12px;
	}
	
	
	#wrapper{
	width: 712px; 
	padding: 0px 0px 14px;
	overflow:hidden;
	}


#nav, #nav1, #navsec 	{
		float:left;
		position:fixed;
		width:260px;
		}
	
#navsec ul li a,#navsec ul li a:link,#navsec ul li a:visited	, #nav ul li a,#nav ul li a:link,#nav ul li a:visited	, #nav1 ul li a,#nav1 ul li a:link,#nav1 ul li a:visited, #nav3 ul li a,#nav3 ul li a:link,#nav3 ul li a:visited	{
		line-height:31px;	
		}

.block1{
	float:right;
	width:428px;
	margin:0 15px 15px 0;
	overflow:hidden;
	}	
	
.block, .block2{
	float:right;
	width:428px;
	margin:0 15px 15px 0;
	overflow:hidden;
	padding:0 0 12px 0;
	}
	
.block3	{
	position:relative;
	width:528px;
	overflow:hidden;
	}

#smallbig {
	display:none;
	}

#middle {
	display:block;
	}
	
.description .hl	{
	font-size:0.8em;
	padding:0 0 12px 0;
	}

#kbnk {
	margin: 0 12px 0 0;
	}
		
.matt {
	float:left;
	border:none;
	width:110px;
	padding: 3px 20px 0px 0;
	}	


article p {
	clear:both;
	display:block;
	}	

#self p {
	clear:both;
	display:inline;
	}
	
video {
    width: 620px;
    height: 350px;
    clear: both;
  }	

.dcol	{
	width:240px;
	margin:0 0 12px 0;
	}
	
.line	{
	margin:2px 0 5px 7px;
	}


.exptext	{
		display:block; 
width:120px;
	}

.expimg	{
	display:block; 
	margin:8px 0 0px 0;
	}	
	
.expsingle	{
display:block; 
	}
	
#bott	{
	width: 722px; 
	position: relative;
	margin: 0 auto;
	padding: 0 0 0 0;
	z-index:50;
	overflow:hidden;
	}

.subnavi, .subnavi a	{
	color:#fff;
	width:80px;
	margin: 2px 0px 0px 0px;
	z-index:60;
	}	
	
#impress 	{
	margin-bottom:430px;
	}
	
#break:before { 
	visibility:hidden;
	}


	}

@media only screen and (device-width: 768px) {
	/* Hier der CSS-Code speziell für das iPad */	

body {
	background: rgb(255,255,255);
		position: relative;
		margin: 0 auto;
		padding: 48px 0 42px;
	}


#wrapper	{
	width: 896px; 
	position: relative;
	margin-bottom: 0px;
	padding: 0;
	z-index:1;
	}


#nav, #nav1	{
	position:fixed;
	width:260px;
	}
		
.block, .block1, .block2	{
	width:612px;
	float:right;
	margin:0 15px 15px 0;
	overflow:hidden;
	}

.block3	{
	position: relative;
	width:762px;
	overflow:hidden;
	}

article	{
	position:relative;
	}

article img{
	width: 300%;
	margin-right:20px;
	}
	
article p {
	clear:both;
	display:block;
	}	

#self p {
	clear:both;
	display:inline;
	}
	

#smallbig {
	display:none;
	}

#middle {
	display:block;
	}
	
.exptext	{
	width:200px;
	}
		
.foo	{
	width:896px;	
	position: relative;
	bottom:10px;
	margin: 0 auto;
	height:0;
	z-index:0;
	clear:both;
	-webkit-tap-highlight-color:#ff7b00;
	}
	
.rgba .foo {
background-color: none;
	}

.no-rgba .foo{
background: #666;
	}

#impress 	{
	margin-bottom:430px;
	}
	
	#bott	{
	width:896px;
	margin: 0 0 50px 0;
	padding: 0;
	z-index:50;
	overflow:hidden;
	}	

		
.subnavi	{
	width:80px;
	margin: 4px 0 25px 2px;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	color:#fff;
	}

.subnavi a:hover	{
	color:#ff7b00;
	}
	
.subnavi a	{
	color:#fff;
	}
	
.copyright	{
	float:left;
	padding: 6px 10px 25px 120px;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	color:#fff;
	}	

}

@media only screen and (device-width: 768px) and (max-device-width: 768px) and (orientation:portrait) {


#wrapper{
	width: 712px; 
	position:relative;
	padding: 0px 0px 14px;
	}


#nav, #nav1	{
		position:fixed;
		width:260px;
		}
		
.block1{
	float:right;
	width:428px;
	margin:0 15px 15px 0;
	overflow:hidden;
	}	
	
.block, .block2{
	float:right;
	position:relative;
	right:0px;
	width:428px;
	margin:0 15px 15px 0;
	}
	
.block3{
	position:relative;
	width:528px;
	}
	
article p {
	clear:both;
	display:block;
	}	

#self p {
	clear:both;
	display:inline;
	}
	
video {
    width: 520px;
    height: 290px;
    clear: both;
  }	

.exptext	{
	width:200px;
	}
		
#impress 	{
	margin-bottom:430px;
	}
	
.foo	{
	width:768px;	
}
	
	
#bott	{
	width:692px;
	position: relative;
	margin: 0 0 0px 10px;
	padding: 0 0 0 20px;
	z-index:50;
	overflow:hidden;
	}

.subnavi	{
	width:80px;
	margin: 4px 0 10px 0px;
	z-index:60;
	color:#fff;
	}	

	
.subnavi a:hover	{
	color:#ff7b00;
	}
	
.subnavi a	{
	color:#fff;
	}
	
.copyright	{
	float:left;
	padding: 6px 10px 0px 118px;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	color:#fff;
	}	
	

}




/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
------------------------------------------------------------------------------------------------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 479px) {
	
body, html{
	overflow:auto;
	}
	
body {
	margin: 0 auto;
	width: auto;
	padding: 24px 0 60px;
	}
/* body width vorher: 320px; statt auto; aber cookie benachrichtigung passte nicht rein */

#wrapper{
	width: 312px;
	padding: 0; 
	overflow:visible;
	}

#nav, #nav1, #navsec {
	position:relative;
	width:300px;
	margin:0 0 18px 8px;
	}

#nav ul, #nav1 ul, #navsec ul {
	margin:0 0 34px 0;
	}
	
#nav3	{
	display:none;
	}
		
#nav {
	display:block;
	}	
	
#navsec ul li a,#navsec ul li a:link,#navsec ul li a:visited, #nav ul li a,#nav ul li a:link,#nav ul li a:visited, #nav1 ul li a,#nav1 ul li a:link,#nav1 ul li a:visited, #nav3 ul li a,#nav3 ul li a:link,#nav3 ul li a:visited	{
		line-height:31px;	
		}

.block, .block1, .block2	{
	position:relative;
	width:300px;
	margin:10px 6px 10px 20px;
	overflow:hidden;
	}
	
.block3	{
	position:relative;
	width:300px;
	overflow:hidden;
	}

.leistung .head	{
	margin-top: 0px;	
	}

a .leistrat {
    margin-bottom: 0px;
	}
	
a .leipm {
    margin-bottom: 0px;
	}
	
a .leicc {
    margin-bottom: 0px;
	}
	
a .leicr {
    margin-bottom: 0px;
	}
	
#formstate, #formpic	{
	display:none;
	}	
	
article a img {
	width:98%;
	}	
	
#ease a img {
	width:96%;
}

article p {
	clear:both;
	display:block;
	}	

#self p {
	clear:both;
	display:inline;
	}
		
#mobi {
	display:none;
	}

video {
    width: 320px;
    height: 180px;
    clear: both;
	}	

.description .hl	{
	font-size:0.9em;
	padding:0 0 0px 0;
	}

.description .hlbig 	{
	font-size:1.6em;
	line-height: 32px;
	letter-spacing:0.16em;
	padding:0px 0 0 0;
	}
/*
#middle	{
	display:none; 
	}

#smallbig	{
	display:inline; 
	}
	*/
	
#smallbig {
	display:none;
	}

#middle {
	display:block;
	}

.leistung ul {
	margin: 0 12px 20px 12px; 
	}

.leistung img {
	width: 60px; 
	margin:0px 0 0 0px;}

.dcol	{
	width:207px;
	margin:0 0 12px 0;
	}
	
.matt	{
	float:left;
	width:90px;
	padding:3px 12px 0px 0;
	}
	
.exp hr	{
	display:none; 
	}

.expsingle	{
	display:block;
	}

.exptext	{
	width:240px;
	}

.expimg{
	display:block;
	padding:0px 12px 0px 0;
	margin:8px 20px 16px 0;
	}

.line	{
	vertical-align:middle;
	margin:2px 0 5px 10px;
	}
	
.foo	{
	width:296px;	
	position: relative;
	margin: 0 auto;
	height:0px;
	z-index:0;
	clear:both;
	-webkit-tap-highlight-color:none;
	}

.rgba .foo {
	background-color: none;
	}

.no-rgba .foo	{
	background: #666;
	}

#bott	{
	width: 296px; 
	margin: 0;
	padding: 0;
	z-index:50;
	overflow:hidden;
	}
	
#impress 	{
	margin-bottom:430px;
	}
	
.copyright	{
	float:right;
	padding: 0px 0px 0px 0px;
	margin: 27px 0px 0px 0px;
	z-index:60;
	font-size:8px;
	line-height: 10px;
	text-transform:uppercase;
	color:#fff;
	}
	
.copyright_plus	{
	float:left;
	padding: 0px 0px 0px 0px;
	margin: 10px 0px 0px 22px;
	z-index:60;
	font-size:8px;
	line-height: 10px;
	text-transform:uppercase;
	color:#fff;
	}

.subnavi	{
	width:68px;
	float:left;
	margin: 20px 0 0 0;
	z-index:60;
	font-size:8px;
	line-height: 10px;
	text-transform:uppercase;
	color:#fff;
	}
	
.subnavi a	{
	color:#fff;
	}
	
.spacer {
	visibility:hidden;
	}

  #page .posts article footer, #page .posts article .main {
    width: 264px;
    clear: both;
    margin-right: none;
  }
  
  #page p, #page blockquote {
    width: auto;
  }
  
  #page p.pull, #page blockquote.pull {
    margin-left: 0;
  }
  
.upper	{
	display:block;
	width:230px;
	}
	
.lower	{
	display:block;
	}

.popcol1 ul, .popcol3 ul{
	color:#fff;
	font-weight:100;
	padding:10px 0 0 10px;
	}	
	
.popcol1 ul li, .popcol3 ul li	{
	color:#fff;
	font-weight:100;
	padding:0 0 0 0;
	}	

}


/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
body {
	margin: 0 auto;
	padding: 24px 0 60px;
	height: auto;
	}

#wrapper{
	width: 436px; 
	padding: 0px 0px 0px;
    clear: both;
	}

	
	
#nav, #nav1	{
		position:relative;
		width:260px;
		margin:10px 0 20px 4px;
		}

#nav ul, #nav1 ul	{
		margin:10px 0 34px 4px;
		}		
		
#nav3	{
		float:left;
		width:160px;
		margin:0px 0 20px 4px;
		}
		
#navsec ul li a,#navsec ul li a:link,#navsec ul li a:visited	, #nav ul li a,#nav ul li a:link,#nav ul li a:visited	, #nav1 ul li a,#nav1 ul li a:link,#nav1 ul li a:visited, #nav3 ul li a,#nav3 ul li a:link,#nav3 ul li a:visited	{
		line-height:31px;	
		}

.block1{
	position:relative;
	top: 10px;
	width:425px;
	height:258px;
	margin:0 4px 35px 0;
	overflow:hidden;
	}
	
.block2{
	position: relative;
	top:0px;
	width:425px;
	margin:0px 11px 55px 0;
	overflow:hidden;
	}

.block3	{
	position: relative;
	width:425px;
	overflow:hidden;
	}
		
.block	{
	foat:right;
	position: relative;
	top:0px;
	width:425px;
	margin:2px 11px 15px 0;
	overflow:hidden;
	}

article p {
	clear:both;
	display:block;
	}	

#self p {
	clear:both;
	display:inline;
	}
	
video {
    width: 480px;
    height: 270px;
    clear: both;
  }	
  	
.description .hl	{
	font-size:0.8em;
	padding:0 0 0px 0;
}
	
#mobi {
	display:block;
}

#formstate, #formpic	{
		display:none;
	}		

.foo	{
	width:436px;
	position: relative;
	margin: 0 auto;
	height:0px;
	z-index:0;
	clear:both;
	-webkit-tap-highlight-color:transparent;
		background-color: rgb(0,0,0);	
		background-color: rgba(0,0,0,0.8);
		background-color: transparent\9; /* Hide solid background for IE8 */
		filter:progid:DXImageTransform.Microsoft.gradient( 
		startColorstr=#9C000000,endColorstr=#9C000000); /* IEs */
		zoom:1;
}

.dcol	{
	width:214px;
	margin:0 0 12px 0;
	}

.matt	{
	float:left;
	width:110px;
	padding:3px 14px 0px 0;
	}

.exp hr	{
	display:none; 
}

.expsingle	{
	display:block;
}

.exptext	{
	width:120px;
}

.expimg{
	display:block;
	margin:8px 0 12px 0;
}

.line	{
	vertical-align:middle;
	margin:2px 0 5px 6px;
}
	
#bott	{
	width:436px;
	margin: 0;
	padding: 0;
	z-index:50;
	overflow:hidden;
	}	
		
#impress 	{
	margin-bottom:430px;
	}
	
.subnavi	{
	width:76px;
	margin: 4px 0 0px 2px;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	color:#000;
	}

.subnavi a	{
	color:#fff;
	-webkit-transition:all 0.2s ease-in-out;
	}
	
.subnavi a:hover	{
	color:#ff7b00;
	-webkit-transition:all 0.2s ease-in-out;
	}
	
.copyright	{
	float:left;
	padding: 6px 0px 0px 20px;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	color:#fff;
	}	

.copyright_plus	{
	float:left;
	padding: 0px 0px 0px 0px;
	margin: 10px 0px 0px 6px;
	z-index:60;
	font-size:8px;
	line-height: 10px;
	text-transform:uppercase;
	color:#fff;
	}	
	
.spacer {
	visibility:hidden;
	display:none;
	}
	

.upper	{
	display:block;
	width:230px;
	}
	
.lower	{
	display:block;
	}
	
}



/*		Large Layout: 1284px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 1360px)	{
	
body {
		margin: 0 auto;
		padding: 60px 0 84px;
	height: auto;
	}
	
	 
  #wrapper{
	width: 1084px; 
	position: relative;
	padding: 2px 0px 5px;
	z-index:1;
}


.block, .block1, .block2	{
	width:796px;
	float:right;
	margin:0 15px 15px 0;
	overflow:hidden;
	}

.block3	{
	position: relative;
	width: 896px; 
	overflow:hidden;
	}


#middle {
	display:none;
	}
	
#smallbig {
	display:inline;
	}

.leist {
	display:inline;
	}
	
.leistung {
	float:left;
	display:block;
	width:240px;
	margin:0 12px 12px 1px;
	}
	
.block3	.description .leistung {
	width:880px;
	margin:0 12px 12px 0px;
	text-align:center;
	}
	
.leitext {
	text-align:left;
	}

.leistung img{
	width:60px;
	margin-left:60px;
	}
		
.leistung ul li {
	margin:0px 0px 0 14px;
	color:#000;
	list-style-image: square; 
	}
		
.head {
	font-weight:bold;
	text-align:center;
		margin:0 0 12px 0;
	}
	

.dcol	{
	width:400px;
	}

.line	{
	margin:2px 0 5px 60px;
}

#bott	{
	width: 1084px; 
	position: relative;
	margin: 0 auto;
	padding: 0 0 0 0;
	z-index:50;
	overflow:hidden;
}
		
.subnavi	{
	float:left;
	margin: 2px 0 5px 4px;
	z-index:60;
	color:#fff;
	}

.subnavi a:hover	{
	color:#ff7b00;
	-webkit-transition:all 0.2s ease-in-out;
	}

	
.copyright	{
	float:left;
	padding: 4px 0px 5px 118px;
	z-index:60;
	font-size:8px;
	line-height: 20px;
	text-transform:uppercase;
	letter-spacing:0.2em;
	color:#fff;
	}	

	
}
	
/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */



/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
}



nav {
  text-transform: lowercase;
  font-family: "ff-unit-web-1", "ff-unit-web-2", sans-serif;
}

nav a, nav a:visited, nav a:hover, nav a:active {
  color: black;
  height: 100%;
}

nav .active {
  color: black;
  font-weight: bold;
}
nav ul {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  overflow: hidden;
  *zoom: 1;
  margin: 0 0 24px 0;
  padding: 0;
}

nav ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
  white-space: nowrap;
  display: inline;
  float: left;
  padding-left: 4px;
  padding-right: 4px;
}
nav ul li:first-child, nav ul li.first {
  padding-left: 0;
}
nav ul li:last-child, nav ul li.last {
  padding-right: 0;
}
nav ul li {
  margin-right: 12px;
  padding: 0;
}


article img {
  width: 100%;
}

.block hr, .block1 hr, .block2 hr {
 border: 0px; /* Für Firefox und Opera */
 border-top: dotted 1px #666;
 border-bottom: dotted 1px #666; /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
 margin-bottom:6px;
}


#kbnk {
	float:left; 
	margin: 0 16px 12px 0;
	clear:both;
	width:242px;
}

#symbi {
	float:left; 
	margin: 0 16px 12px 0;
	clear:both;
	width:242px;
}
 
.slideshow { position: relative;display:block;float:left;width: 242px; height: 193px;margin: -6px 12px 20px 0; }
.slideshow li { position: absolute; left: 0; top: 0; width: 242px; height: 193px; display: none; list-style: none; }
.slideshow li:first-child { display: block; }

.slideshow2 { position: relative;display:block;float:left;width: 242px; height: 193px;margin: -6px 12px 20px 0; }
.slideshow2 li { position: absolute; left: 0; top: 0; width: 242px; height: 193px; display: none; list-style: none; }
.slideshow2 li:first-child { display: block; }

	
.subnavi .active {
	color:#ff7b00;
	}


#accordion {
	margin: -2px 0 5px 0;
}

.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.responsive-video {
position: relative;
padding-bottom: 56.15%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}

#impress 	{
	margin-bottom:430px;
	}
	
body {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}	

.hl, #nav {
  	-moz-hyphens: none;
   -o-hyphens: none;
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
}

/*
#formpic a:link, #formpic a:visited, #formpic a  img{
	-webkit-transition: transform .2s ease;
	-moz-transition: transform .2s ease;
	-o-transition: transform .2s ease;
	transition: transform .2s ease;
}

.opacity #social ul li a img:hover {
	opacity: none;
}

#formpic a:hover img{
	-moz-transform:translate(0, 20px);
 	-webkit-transform:translate(0, 20px); 
	transform:translate(0, 20px);
}
*/


.contactimg{
	width:30px;
	margin:0px 12px 0 0;
	}

.description .add img{
	height:60px;
	width:auto;
	vertical-align:middle;	
	}


.cc	{
	margin: 0;
	background-color: rgba(0,0,0,0.4);
	margin: -20px 0 -20px 0;
	}


.block4	{
	width:auto;
	overflow:hidden;
	z-index:1;
	}
	
#wrapper2 .description	{
	text-transform:none;
	letter-spacing:none;
	font-weight:100;
	background-color: rgba(0,0,0,0.4);
	padding:10px 60px 20px 60px;
	height: auto;
	}
	
#wrapper2	.block4	article	.description	{
	z-index:1;
	background-color: rgba(0,0,0,0.4);
	font-size:0.9em;
	}
	
.divimg	{
	display: flex;
	justify-content: center;
	}
		
.popback 	{
	overflow:hidden;
	background-color: rgba(0,0,0,0.4);
	}

.licon2	{
	display: block; 
	width:120px;
	}

.poptext{
	font-size:0.9em;
	}	
		
	
.poptext ul, .poptext2 ol	{
	color:#fff;
	font-weight:100;
	padding:0 0 0 0;
	}	
	
article ol li{
	margin:0px 12px 0 0;
	list-style: decimal; 
	color:#ff7b00;
	}

.poptext2 {
	column-count: 2;
	column-gap: 40px;
	padding: 0 0 20px 0;
  }
  
.poptext3 {
	color:#fff;
	font-weight:100;	
	column-count: 3;
	column-gap: 40px;
	padding: 0 0 20px 0;
  }
  
.hlc	{
	text-align: center;
	margin: 15px 0 30px 0;
  }
  

/*
.popcol2	{
	width: 30%;
	color:#fff;
	font-weight:100;	
	padding: 0 30px 0px 0;
	float:right;
  }
  */
.popcol1	{
	height: auto;
	color:#fff;
	font-weight:100;	
  }

.pophead  {
	color:#ff7b00;
  }
  
.popcol1 .head, .popcol3 .head	{
	color:#ff7b00;
  }
  
    
.popcol3	{
	color:#fff;
	font-weight:100;	
	  }

.popcol1 ul, .popcol3 ul{
	color:#fff;
	font-weight:100;
	padding:0px 0 0 20px;
	}	
	
.popcol1 ul li, .popcol3 ul li	{
	color:#fff;
	font-weight:100;
	padding:0 0 0 0;
	}	

.popcol1 ul li::marker, .popcol3 ul li::marker {
	color:#ff7b00;
}	

@media only screen and (min-width: 992px) {
      .popcols {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 3.0rem;
         padding: 0 10px 0 10px;
      }
      .pophead  {
			padding: 0 0 0 10px;
  		}
   }