html 			{background: #FCFCFE; padding:0; margin:0; min-height: 101%; color: #333333; font-family: Arial, Verdana; font-size: 80%;}
body 			{padding:0; margin:0;}

div 			{border: 0px solid #C0C0C0;}

h1				{color: #CC0000; font-size: 160%; font-weight: normal; margin: 0; padding: 0;}
h2				{color: #CC0000; font-size: 110%; font-weight: bold; margin: 0; padding: 0;}
h3				{color: #333333; font-size: 100%; font-weight: bold; margin: 0; padding: 0;}
a				{color: #CC0000; text-decoration: none;}
ul 				{padding: 1em 0 0.5em 0.9em; margin: 0;list-style: none;}
li			 	{padding: 0 0 0 0.9em; background: url("images/arr-right.gif") no-repeat 0 3px;}

.hidden			{position:absolute;left:-1000px;}
.clear			{clear: both; line-height: 0; font-size: 0; height: 0;}

.bu				{color: #333333; font-weight: bold; font-size: 110%; padding-bottom: 2px; background: url("images/dotted-line.gif") repeat-x 0 100%; line-height: 2.0em;}
.error			{color: #CC0000; font-weight: bold;}
.red			{color: #CC0000;}
.redb			{color: #CC0000; font-weight: bold;}
.red150			{color: #CC0000; font-weight: bold; font-size: 150%;}
.green			{color: #009900;}
.black			{color: #000000;}
.noborder		{border: 0;}
.centa			{text-align: center;}
.p_exkl			{color: #CC0000; font-weight: bold;}
.p_inkl			{font-size: 90%;}
.klein			{font-size: 0.9em; color: #999999;}
.al				{text-align: left;}
.ar				{text-align: right;}
.underl			{text-decoration: underline;}
.underl_b		{font-weight: bold; text-decoration: underline;}
.invers-dgrey	{color: #FFFFFF; background-color: #333333; padding: 2px 3px; font-size: 120%;} 
.iimg			{padding: 2px; border: 1px solid #666666;}
.img_ref		{max-width:100% !important; height: auto; border: 1px solid #666666; margin: 0.2em 0;}
.ozeiten		{font-size: 1.1em; font-weight: bold;}

.meldung_green	{font-weight: bold; font-size: 120%; border: 2px solid #00CD66; text-align: center; padding: 0.5em;}

/* support imgs col9 */
.img_max_w_col9	{max-width: 670px; height: auto; border: 1px solid #666666; margin: 1em 0;}

/* leeres Textfeld im Kontaktformular - wenn auegfüllt - SPAm-Bot */
.versteckmich 	{visibility:hidden; display: none !important;}


.wrapper		{margin: 0 auto; max-width: 920px; padding: 0 0.5%;}
.top			{width: 100%; height: 5px; background-color: #353637; margin-bottom: 5px;}

/* https://css-tricks.com/logic-in-media-queries/ */
.supercol 	{clear: both; padding: 0;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {float: left;	margin: 0 3% 0 0; padding: 0.5% 0;}
.col1.fin, .col2.fin, .col3.fin, .col4.fin, .col5.fin, .col6.fin, .col7.fin, .col8.fin, .col9.fin, .col10.fin, .col11.fin, .col12 {margin: 0;}
.col1 {width: 5.5%;}
.col2 {width: 14%;}
.col3 {width: 22.5%;}
.col4 {width: 31%;}
.col5 {width: 39.5%;}
.col6 {width: 48%;}
.col7 {width: 56.5%;}
.col8 {width: 65%;}
.col9 {width: 73.5%;}
.col10 {width: 82%;}
.col11 {width: 90.5%;}
.col12 {width: 99%; margin: 0;}
/* .col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {width: 100%;	height: auto;} */

.line 		{text-align: center; border-top: 1px solid #e7e7e7; margin: 3em 0 1em 0; padding-top: 5em; font-size: 125%; font-weight: bold; }


.logo					{float: left; width: 24%; min-width: 210px; height: 9.5em; padding-top: 1em; font-size: 85%; color: #8C8C8C; letter-spacing: 0.007em;}
.logo a					{color: #8C8C8C; text-decoration: none;}
.logoimg				{border: 0; padding-bottom: 1em;}


nav						{float: right; width: 75%; font-size: 85%; border-bottom: 1px solid #e7e7e7;}
nav .nav_element		{float: right; width: 13.8%; height: 7.3em; border-top: 5px solid #353637; padding: 2.6em 0 0 0; text-align: center; margin-top: -1em;}
nav .nav_element:hover	{border-top: 5px solid #CC0000; border-bottom: 1px solid #CC0000;}
nav a					{text-decoration: none; color: #333333;}
nav .hnp				{font-weight: bold; font-size: 110%;}
nav .hnp:hover			{color: #CC0000;}
nav .hnp_a				{font-weight: bold; font-size: 110%; color: #CC0000;}
nav .snp				{font-weight: normal; font-size: 90%; color: #7f7f7f;}
nav .snp:hover			{font-weight: normal; font-size: 90%; color: #CC0000;}


.teaser					{width: 100%; height: 0em;}
.a4u_slider				{width: 99%; height: 15.1em; background-color: #FAFAFA; border: 1px solid #999999}

.logo					{}




/* HOME =================== */
#index .short_description{min-height: 5em}	
#index h1				{font-size: 150%;}
#index h1 a			{text-decoration: none; font-size: 100%;}
#index h2				{color: #333333; font-family: Segoe UI, Arial, Verdana; font-size: 105%; font-weight: 600; font-style: normal; font-variant: normal; margin: 0; padding: 0;}
#index a				{text-decoration: none; font-size: 90%;}
#index .fimg		{max-width:100% !important; height: auto; border: 0; aspect-ratio: attr(width) / attr(height);}

#index .alert  	{width: 97%; border: 2px dotted #FF0000; text-align: center; font-weight: bold; margin: -1em 0 1em 0; padding: 0.5em; clear: both;}


/* CONTENT =================== */
#content	{}


/* INTRO =================== */
.intro		{float: left; width: 100%;}
.intro-l	{float: left; min-width: 32%; padding-right: 1em;}
.intro-r	{float: left; width: 65%;}
.intro h2	{color: #666666;}

.info		{text-align: center;}
.info .i	{background-color: #000000; color: #FFFFFF; font-size: 100%; font-weight: bold; letter-spacing: 0.2em; padding: 0.2em 0.2em 0.2em 0.3em;}
.info .nfo	{background-color: #CC0000; color: #FFFFFF; font-size: 100%; font-weight: bold; letter-spacing: 0.2em; padding: 0.2em 0.1em 0.2em 0.2em;}


#content 				{color: #666666; font-size: 90%;}
#content p				{margin-bottom: 15px; line-height: 1.4em; text-align: justify;}
#content .rechts		{text-align: right;}
#content .centa			{text-align: center;}
#content .hinweis		{font-size: 0.9em; text-align: center; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; padding: 5px; margin-left: 20px; margin-right: 20px;}
#content .trennlinie	{text-align: center; border-bottom: 1px solid #CCCCCC; padding: 5px; margin-left: 20px; margin-right: 20px;}
#content strong			{color: #333333; font: bold;}

.angebot 				{width: 80%; margin-left: 10%; border: 1px solid #CCCCCC; padding: 1em;}
.angebot h3				{width: 98%; color: #FFFFFF; background: #333333; margin: 0px; padding: 1%; font-weight: bold; font-size: 110%; border-bottom: 1px solid #FF0000;}
.angebot .preisbox		{float: right; border: 2px solid #CC0000; padding: 5px;}
.angebot .tbl			{width: 99.8%; border: 1px solid #CCCCCC;}
.angebot th				{color: #000000; font-weight: bold; background-color: #D6D6D6; border-bottom: 1px solid #333333; text-align: center;}


/* WBHOSTING =================== */
.tbl					{}
.tbl	.wrapper		{float: left; width: 100%; clear: both; border-left: 0px solid #999999; border-top: 0px solid #FFFFFF; border-right: 0px solid #FFFFFF; border-bottom: 1px solid #999999;}
.tbl	.hc				{float: left; width: 32%; padding: 0.5em 0; text-align: left;	font-size: 100%; font-weight: bold;}
.tbl	.hc1			{float: left; width: 32%; padding: 0.5em 0; text-align: left;	font-size: 100%; font-weight: bold; background-color: #F4F4F4;}
.tbl	.t				{float: left; width: 17%; padding: 0.5em 0; text-align: center; background-color: #666666; color: #FFFAF0; font-weight: bold;}
.tbl	.c				{float: left; width: 17%; padding: 0.5em 0; text-align: center;}
.tbl	.c1				{float: left; width: 17%; padding: 0.5em 0; text-align: center; background-color: #F4F4F4;}


/* INFOBOX =================== */
.infobox					{width: 100%; margin: 1em 0; padding: 1em 0.5em; color: #666666; background: #F4F4F4; border: 1px solid #C0C0C0; font-size: 85%;}
.kb			{line-height: 130%; font-size: 110%;}
.info_img_bg			{background: #CC0000; height: 1px; margin: 0.7em 0 1em 0;}
.info_img_bg span	{position: relative; top: -0.8em; left: 33%; background-color: #F4F4F4;}
.info_img					{padding: 0 0.5em; background-color: #F4F4F4;}
.info_img_bg .txt	{padding: 0.5em; position: relative; top: -0.8em; left: 33%; background-color: #F4F4F4; font-weight: bold; color: #CC0000;}
.infobox h2				{font-size: 100%; font-weight: bold; }
.infobox1					{width: 97%; margin: 1em 0; padding: 1em 0.5em; color: #666666; background: #F4F4F4; border: 4px solid #999999; font-size: 85%;}


/* KONTAKT =================== */
.kontakt 				{margin: 0 auto; width: 80%; border: 1px solid #CCCCCC; padding: 1em;}
.f_txt					{width: 22em;}
.f_plz					{width: 4em;}
.f_ort					{width: 17em; margin-left: 0.5em}
.f_tel					{width: 11em;}
.f_email				{width: 17em;}
.f_anfragetxt			{height: 10em;}



/* FOOTER =================== */
#footer		{clear: both; width: 100%; background-color: #231f1f; font-size: 90%; line-height: 1.3em; color: #999999; background-image: url("images/footer-line.gif"); background-repeat: repeat-x;}
.footer		{margin: 0 auto; max-width: 920px; padding: 2em 1em;}
.footer a	{text-decoration: none; color: #999999;}
.footer .hnp{font-weight: bold;}
.img_interesse {max-width:100%; height: auto;}







/* ====================================================================================================== */



@media all and (max-width: 919px) 
{
.top					{background-color: #CC0000;}

.logo					{margin: 0 auto; width: 100%; text-align: center;}
.logoimg				{text-align: center;}
nav						{margin: 0 auto; width: 100%; padding-top: 1.2em; }
nav .nav_element		{float: right; width: 14.28%; min-width: 75px;}

nav .hnp				{font-size: 100%;}
nav .hnp_a				{font-size: 100%;}
nav .snp				{font-size: 90%;}
nav .snp:hover			{font-size: 90%;}

.footer		{padding: 2em 1em;}
}

@media all and (min-width: 536px) 
{
nav					{visibility: visible;}
#nav-main 			{visibility:hidden; display: none !important;}
}


@media all and (max-width: 535px) 
{
nav					{visibility:hidden; display: none !important;}
/* mobile Navi */
#nav-main 			{visibility: visible; margin: 0 auto; padding: 2.6em 0 0 0; display: inline-block; position: relative; width: 100%; text-align: left; font-size: 120%;  
					background-color: #808080; opacity: 0.85; filter: alpha(opacity=85); background-image: url('images/navigation.gif'); background-position: 38% 12px; background-repeat: no-repeat; 
					-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
#nav-main 			{margin-top: 1em;}

.mnav-menu 			{display: none; margin: 0; padding: 0;}
.mnav-menu ul		{margin: 0; padding: 0 ; line-height: 200%; font-weight: 600; list-style-type: none;}
#nav-main li		{padding: 0 0 0 1em; background: url("images/arr-right-white.gif") no-repeat 0.1em 0.7em;}

.mnav-menu-item 	{float: none; position: relative; display: block; width: 94%; padding: 0 1.2% 0 5%; line-height: 200%; font-weight: 600; color: #FFFFFF;}
.mnav-menu-item a 	{display: block; text-decoration: none; color: #FFFFFF;}

.mnav-submenu 		{width: 100%; position: relative; padding-left: 0; z-index: 9999; display: none; list-style-type: none;}
.mnav-submenu-item a{display: block; padding-left: 20px; color: #333333; }

.mnav-mobile-btn 	{height: 30px; width: 30px; padding: 5px; display: block; cursor: pointer; position: absolute; top: 0; background-image: url('images/mobile-nav-icon.svg'); background-position: 50% 50%; background-repeat: no-repeat; background-color: #252525;}
.mnav-open-close 	{display: block; float: right;}
.mnav-mobile-arrow 	{height: 30px; width: 30px; padding: 5px; display: block; cursor: pointer; background-image: url('images/mobile-arrow-icon.svg'); background-position: 50% 50%; background-repeat: no-repeat; background-color: #ccc;}
.mnav-mobile-arrow-mirror {-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}

.mnav-theme 							{background-color: #666666;}
.mnav-theme .mnav-menu-item a:hover 	{color:#CC0000;}
.mnav-theme .mnav-submenu-item 			{background-color: #ccc;}
.mnav-theme .mnav-submenu-item a:hover 	{background-color: #ddd;}
.mnav-theme .mnav-mobile-btn:hover 		{background-color: #555;}
.mnav-theme .mnav-mobile-arrow:hover 	{background-color: #333;}
.mnav-theme .mnav-open-close 			{border-left: 1px solid #aaa; border-bottom: 1px solid #aaa;}
.mnav-theme .mnav-menu-item 			{border-bottom: 1px solid #aaa;}
.mnav-theme .mnav-submenu-item 			{border-bottom: 1px solid #aaa;}

}




@media (min-width: 401px) and  (max-width: 768px) 
{
.supercol			{font-size: 120%; padding-left:  0.25em; padding-right: 0.25em;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {float: left;	width: 99%;}
.col3.fin 		{clear: both; float: left; width: 98%; padding:0;}

.infobox			{width: 95%; margin: 0 auto; padding: 1em;}
.info_img_bg		{background: #CC0000; height: 1px; margin: 0.7em 0 1em 0;}
.info_img_bg span	{position: relative; top: -0.8em; left: 43%; background-color: #F4F4F4;}
.info_img			{padding: 0 0.5em; background-color: #F4F4F4;}
.info_img_bg .txt	{padding: 0.5em; position: relative; top: -0.8em; left: 43%; background-color: #F4F4F4; font-weight: bold; color: #CC0000;}
.infobox h2			{font-size: 100%; font-weight: bold; }

#footer			{font-size: 100%; text-align: center;}
#footer .ar	{text-align: center; padding-top: 1em;}

} 


@media all and (max-width: 400px)
{
.supercol		{font-size: 120%;}
.wrapper		{padding: 0 3%;}
.supercol		{display: flex; display: -webkit-flex; flex-direction: column;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {float: none;	width: 99%;}
.col3.fin 		{clear: both; float: left;}

#content		{margin-top: 1em;}

.intro-l		{float: left; width: 100%; text-align: center; }
.intro-r		{clear: both; float: left; width: 100%;text-align: center;}
.iimg			{width: 100%; height: auto;}

.angebot 		{width: 100%; margin: 0; border: 1px solid #CCCCCC; padding: 1em 0;}
.angebot h3		{width: 98%; margin: 0; text-align: center;}

#footer			{font-size: 100%; text-align: center;}
#footer .ar	{text-align: center; padding-top: 1em;}
}




.cookie_banner-wrapper{z-index:9001;position:relative}
.cookie_container .cookie_btn{cursor:pointer;text-align:center;font-size:0.6em;-webkit-transition:font-size 200ms;transition:font-size 200ms;line-height:1em}
.cookie_container .cookie_message{font-size:0.6em;-webkit-transition:font-size 200ms;transition:font-size 200ms;margin:0;padding:0;line-height:1.5em}
@media screen and (min-width:500px){
.cookie_container .cookie_btn{font-size:0.8em}
.cookie_container .cookie_message{font-size:0.8em}
}
@media screen and (min-width:768px){
.cookie_container .cookie_btn{font-size:1em}
.cookie_container .cookie_message{font-size:1em;line-height:1em}
}
@media screen and (min-width:992px){
.cookie_container .cookie_message{font-size:1em}
}
@media print{.cookie_banner-wrapper,.cookie_container{display:none}}
.cookie_container{position:fixed;left:0;right:0;bottom:0;overflow:hidden;padding:10px}
.cookie_container .cookie_btn{
padding: 0.8em 1em; background-color:#f1d600;background-color:black;cursor:pointer;-webkit-transition:font-size 200ms;transition:font-size 200ms;text-align:center;font-size:0.6em;display:block;width:33%;margin-left:10px;float:right;max-width:80px
}
.cookie_container .cookie_message{-webkit-transition:font-size 200ms;transition:font-size 200ms;font-size:0.6em;display:block}
@media screen and (min-width:500px){
.cookie_container .cookie_btn{font-size:0.8em}
.cookie_container .cookie_message{margin-top:0.5em;font-size:0.8em}
}
@media screen and (min-width:768px){
.cookie_container{padding:15px 30px 15px}
.cookie_container .cookie_btn{font-size:1em;padding:8px 15px}
.cookie_container .cookie_message{font-size:1em}
}
@media screen and (min-width:992px){
.cookie_container .cookie_message{font-size:1em}
}
.cookie_container{background-color:#4c4c4c; opacity: 0.96; color: #FFFFFF; font-family: Arial; box-sizing: border-box; border-top: 1px solid #CCCCCC;}
.cookie_container::-moz-selection {background: #FF5E99; color: #FFFFFF; text-shadow: none}
.cookie_container .cookie_btn,.cookie_container .cookie_btn:visited{
color: #000000; background-color: #009900; background-color: #33cc33; transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;-webkit-transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;border-radius:5px;-webkit-border-radius:5px
}
.cookie_container .cookie_btn:hover,.cookie_container .cookie_btn:active {background-color: #33FF00; color: #000000;}
.cookie_container a,.cookie_container a:visited{text-decoration:none;color:#FFFFFF;-webkit-transition:200ms color;transition:200ms color}
.cookie_container a:hover,.cookie_container a:active{color:#FFFFFF;}

@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(66px);transform:translateY(66px)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideUp{0%{-webkit-transform:translateY(66px);-ms-transform:translateY(66px);transform:translateY(66px)}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.cookie_container,.cookie_message,.cookie_btn{animation-duration:0.8s;-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-o-animation-duration:0.8s;-webkit-animation-name:slideUp;animation-name:slideUp}
.cookie_container a, .cookie_message a {font-size: 0.8em; font-weight: normal; color: #FFFFFF; text-decoration: underline;}