:root {
  --background-blue: blue;
}


* { padding:0px; margin:0px; text-decoration:none; box-sizing: border-box;}
html, body { scroll-behavior: smooth; }
body { background-color:rgb(37, 37, 37); overflow-x: hidden; color:white; font-family: Arial,FreeSans,sans-serif; font-size:18px; }
h1 { font-size:1.4em; margin-top:10px; }
h1 .typ{ color:rgb(2, 120, 255);}
h2 { font-size:1.38em; }
h3 { font-size:1.1em;}
a { color:white;}
a:hover { color:rgb(2, 120, 255); }
button { background-color:lightgrey;}

#mobile_nav {display: none;}
#mobile_footer { display: none;}

.bold { font-weight: bold; color:rgb(2, 112, 255)}

.in_text_link:link { color:rgb(2, 112, 255); }
.in_text_link:hover { color:rgb(12, 63, 129); }

iframe { width:90%;max-width:1500px; min-height:700px; height:100%;  border:0px; margin-top:0px; }
.clearer { clear:both;}
.sticky { position: -webkit-sticky; position: sticky; top: 140px;}

#wrapper {
	display:flex;
	align-items:center;
	justify-content:center;
  flex-direction: column;
  margin-top:0px; /* höhe des header-container */
}

#show_picture{ height:100px; width: 100%; background-size: cover; background-position:bottom center;  margin-top:0px; margin-bottom: 50px;}
#main_picture { height:600px;width: 100%; background-size: cover; background-position:bottom center;  margin-top:0px; margin-bottom: 50px;}
#show_picture .gradient { height:150px; width:100%; margin-top:0px;}
#main_picture .gradient { background:linear-gradient(to top, rgba(37, 37, 37, 1), rgba(37, 37, 37, 0)); height:200px; width:100%; margin-top:400px;}
#main_picture .gradient_felgen { background:linear-gradient(to top, rgba(37, 37, 37, 1), rgba(37, 37, 37, 0)); height:200px; width:100%; margin-top:-200px;}

#show_picture #breadcrump_show,
#main_picture #breadcrump_show,
#main_picture #breadcrump {display:flex; justify-content: center;  width:100%; }

#show_picture #breadcrump_show p,
#main_picture #breadcrump_show p { width:80%; max-width: 2000px;}

#main_picture #breadcrump p { width:100%; max-width: 2000px; margin:0 30px;}

#show_picture #breadcrump_show p span,
#main_picture #breadcrump_show p span,
#main_picture #breadcrump p span { background-color: rgba(10, 10, 10, 0.589); padding: 10px; border-radius: 10px; font-size: 0.8em;}

#show_picture #breadcrump_show p span > span,
#main_picture #breadcrump_show p span > span,
#main_picture #breadcrump p span > span  { background-color: none; padding: 0px; border-radius: 0px; font-size: 1.3em;color: rgb(2, 120, 255) ;}


#breadcrump { margin-bottom: 30px; margin-left:-10px; width:100%; display: block;}
#breadcrump p span { background-image: url("../images/page/back_big.jpg"); background-size: cover; padding: 8px 20px; border-radius: 10px; font-size: 1em;display:block; width:100%; }
#breadcrump p span > color  { background-color: none; padding: 0px; border-radius: 0px; font-size: 1.3em;color: rgb(2, 120, 255);  }



/* ################################################################################################################################################################## */


.pic_felgen { background-image:url(../images/page/back_felgen.jpg);  }
.pic_felgen div { background-color:rgba(255, 255, 255, 0.55); height:100%; width: 100%; color:black; padding:20px 80px; display:flex;justify-content: center;align-items:center;} 
.pic_felgen div img { margin:20px; width:350px;}
.pic_felgen div p { max-width:1300px; font-size: 0.85em; font-style: italic;}

.pic_home { background-image:url(../images/page/back_home.jpg); height:800px !important;}
.pic_home .gradient { margin-top:600px !important; }
.pic_innenraum_individualisierung{ background-image:url(../images/page/back_leder.jpg); }
.pic_bodykits { background-image:url(../images/page/back_bodykit.jpg); }
.pic_folierung { background-image:url(../images/page/back_folierung.jpg); }
.pic_carbonteile { background-image:url(../images/page/back_carbon.jpg); }
.pic_unfall { background-image:url(../images/page/back_unfall.jpg); }
.pic_prototyping { background-image:url(../images/page/back_prototyping.jpg); }
.pic_hol_und_bring_service { background-image:url(../images/page/back_holundbring.jpg); }
.pic_lackierung { background-image:url(../images/page/back_lackierung.jpg); }
.pic_motorumbau { background-image:url(../images/page/back_motor.jpg); }
.pic_service { background-image:url(../images/page/back_service.jpg); }
.pic_kontakt { background-image:url(../images/page/back_kontakt.jpg); }
.pic_agb { background-image:url(../images/page/back_agb.jpg); }
.pic_imprint { background-image:url(../images/page/back_imprint.jpg); }
.pic_bremsen { background-image:url(../images/page/back_bremsen.jpg); }
.pic_carbondach { background-image:url(../images/page/back_carbondach.jpg); }
.pic_leistung { background-image:url(../images/page/back_leistung.jpg); }
.pic_fahrwerk { background-image:url(../images/page/back_fahrwerk.jpg); }
.pic_datenschutz { background-image:url(../images/page/back_datenschutz.jpg); }
.pic_leistungsmessung { background-image:url(../images/page/back_leistungsmessung.jpg); }
.pic_restauration { background-image:url(../images/page/back_restauration.jpg); }
.pic_radlaufverbreiterungen { background-image:url(../images/page/back_radlauf.jpg); }
.pic_bodykit { background-image:url(../images/page/back_bodykits.jpg);}

@media only screen and (min-width: 2500px) {
  #main_picture { height:800px; }
  #main_picture .gradient { margin-top:600px;}

  .pic_home { height:1000px !important;}
  .pic_home .gradient { margin-top:800px !important; }
}

/* ################################################################################################################################################################# */


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  height:20px;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background:linear-gradient(to top right,  rgb(4, 83, 255), rgba(2, 10, 122, 1)); 
  box-shadow: 0px 0px 25px 15px black;
  color: #fff;
  text-align: center;
  padding: 0px;
  border-radius: 10px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  width: 250px;
  top: 100%;
  left: 50%;
  margin-left: -125px; 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltiptext h4 { border-top-left-radius: 10px; border-top-right-radius: 10px; background: white; display: block; color:rgb(2, 112, 255) ;width:100%; padding:15px; margin-bottom: 10px;}
.tooltiptext a { margin-bottom:10px;}
/* ################################################################################################################################################################# */

#icons { float:left; width:300px;}
.link {float:right; width:90px; text-align: right;}

#icons img, .link img  { width:25px; height:25px; border-radius: 8px; margin:0 2px; float:left; 	}
#icons span { padding:0px;  }
#icons span img { margin-right:10px; border-radius: 8px; margin-left:30px;}

.right { float:right;}

#logo img { margin:0px 40px; }
#logo_small img { width:82px; height:20px;}
#logo_small {display:none; width:200px; }
#logo_small a { width: 200px; display: inline;}
.menu_halcon { height:90px; top:10px; margin-left:20px; position:absolute; }

#links { text-align: right; }
#links img {
    width:25px;
    height:25px;
    border-radius: 8px;
}

#footer {
  height:250px;
  width:100%;
  border-top:3px solid var(--background-blue);
  background-color:rgb(22, 22, 22);
  display: flex;
  justify-content: center; 
  align-items:flex-start; 
  bottom:0px;
  padding-top:50px;
}

#footer h2 { margin-right:50px;color:rgb(2, 48, 255)}
#footer ul:before{content:attr(aria-label);font-weight:bold;margin-left: -5px;color:rgb(2, 120, 255);}
#footer ul { list-style-type: none; margin:10px 30px; }
#footer li { margin:2px; }
#footer li a { color:white; font-size: 0.8em; }
#footer li a:hover { color: blue; }

/* ################################################################################################################################################################# */

#welcome { width:100%; max-width: 1000px; margin-bottom: 100px; padding:20px;} 


.more_news { margin:20px 0px 60px 0px;}

#news {
    padding:20px;
    color:black;
    flex:1;
    color:white;
    display:flex; 
	  justify-content: space-around;
    flex-wrap : wrap;
    max-width: 2000px;
}

#newsfull article,
#news article {
    /*border-left:15px solid linear-gradient(to top right, rgba(0, 128, 128, 0.7), rgba(0, 128, 128, 0.3));*/
    border-left:15px solid linear-gradient(to top right,  rgba(2, 19, 255, 0.7), rgba(2, 10, 122, 0.5));  
    background-color: rgb(185, 184, 184);
    color:black;
    padding:10px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}

#news article {
    float:left;
    width: 400px;
    height:400px;
    position:relative;
    padding:10px;
}

#newsfull article {
    max-width: 2000px;
    padding:10px;
}

#news article a { color:rgb(2, 120, 255); }
#news article span { color:grey; }
#news article p { margin-top:20px; margin-bottom:20px;}
#news article .gallery { bottom:10px; right:20px; position: absolute;   width:250px; height:60px;text-align: right; display:table-cell; padding-top:35px;}
#news article .news_image { float:left; width:120px; height:100%;overflow:hidden;}
#news article .news_text { float:left; width:240px;height:100%; overflow:hidden;}

#newsfull .news_div,
#news .news_div { 
    background:linear-gradient(to top right,  rgba(2, 19, 255, 0.7), rgba(2, 10, 122, 0.5)); 
    margin:50px; padding-left:20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}

#newsfull .news_div { max-width:2000px; }
#newsfull #news_menu { float:left; width:8%; margin-left:20px;margin-top:20px;height:70%; position: fixed;left:20px;}
#newsfull #news_menu fieldset { border:0px; border-left: 3px solid var(--background-blue); text-indent: -20px; margin-top:25px;padding-top:0px; font-weight: bold;}
#newsfull #news_menu fieldset legend { padding-bottom:25px; text-decoration: underline var(--background-blue); text-decoration-thickness: 3px;}
#newsfull #news_menu fieldset p { border-bottom: 3px solid var(--background-blue); margin-top:20px; text-align: right; }
#newsfull #news_menu span { padding-top:10px;display: block; }
#newsfull .news_content { float:right; width:85%; }
#newsfull .news_content .news_div .news_mainpic { width:100%;}
#newsfull .news_content .news_div .news_image { width:48%; float:left;}
#newsfull .news_content .news_div .news_text { width:50%; float:right;}
#newsfull .news_content .news_div .news_text p { margin-top:20px;}
#newsfull .news_content .news_div .news_text h1 { display:inline;}
#newsfull .news_content .news_div .news_text span { float: right; }
#newsfull .news_content .news_div .news_text a { color:blue; }
#newsfull .news_content .anchor{ display: block; height: 115px; margin-top: -115px; visibility: hidden;  }
#newsfull .news_content .news_div .news_image .row  { display: flex; flex-direction: row; width:100%; justify-content: space-between;}

.more_news a .typ { color:rgb(2, 112, 255);}

/* ################################################################################################################################################################# */
#felge { width:100%; max-width: 2000px; }

#felge section,
#felgen section {
    text-align:center;
    color:white;
    padding:10px;
    margin:20px;
}

#felge section {
    width:1000px;
}

#felge #felgen_grid { width:45%; text-align: right; float:left; margin-left:50px;}
#felge .text {  float:right; margin-right:50px; text-align: left; width:45%; }
#felge .text h1 { font-size:1.4em; margin-bottom:20px;}
#felge .text h1 span { color:rgb(2, 61, 255);}
#felge .text h1 .typ { color:rgb(2, 112, 255);}
#felge .text hr { margin:25px 0px; border-color: rgb(1, 6, 71);}
#felge .text button { width:100%; margin-top:20px; padding:10px; font-size: 1.0em;  font-weight:bold; color: white; background:linear-gradient(to top right, rgba(2, 19, 255, 0.7), rgba(2, 10, 122, 0.5));   }


#felge .text .detail {display:flex; align-items:center; justify-content:center; margin:30px 0px; position:relative; background-color:  rgba(2, 11, 126, 0.692); width:100%; border-radius: 50px; border-bottom-right-radius: 25px;height:60px; }
#felge .text .detail .size { display:inline; background-color:rgb(37, 37, 37); border:5px solid blue; border-radius: 50%; font-size:1.7em; padding:20px; }
#felge .text .detail .width { width:100%; padding:22px;height:100%; }
#felge .text .detail .price { text-align:right; padding:10px 35px;height:100%; width:200px; background-color: rgb(1, 6, 71);border-bottom-right-radius:50px;border-radius:25px;}
#felge .text h4 { color:rgb(2, 112, 255); float: left;}
#felge .text .t_right { display: inline-block; width:100%; text-align:right; padding:10px 0px;}

#felge .text .marke_text { width:400px; float:left;}
#felge .text .marke_logo { width:200px; float:right;}

#felge_gallery { display:flex; justify-content:center; flex-wrap: wrap; width:100%; border-top:3px solid blue; background-color: rgb(24, 24, 24); padding:40px 0px;}
#felge_gallery div { max-width: 2000px; }
#felge_gallery img { width:400px; height:250px;  object-fit: cover; margin:20px;}

#felge_other { display:flex; justify-content:center; align-items: center; border-top:3px solid blue;  padding:40px 0px; width:100%;text-align: center;} 
#felge_other p {display: inline-block; }
#felge_other p img { width:300px; margin-bottom:20px; margin:10px; }
#felge_other p span { display: inline-block; font-size: 1.9em; margin-right:-90px; height: 20px; font-style: italic; transform: rotate(-90deg);}


#felgen section {
  width:250px; 
  height:500px;
  float:left; 
  box-shadow: 0px 0px 10px 5px var(--background-blue);
  background-color: black;
}


#felgen  {
    width:85%;
    float:right;
}
#felgen_filter { width:12%; float:left; padding:20px; position:relative;}
#felgen_filter fieldset { padding:10px; margin-bottom:20px; border:0px; border-bottom:2px solid rgb(1, 6, 71);}
#felgen_filter fieldset legend { font-size: 1.1em; font-variant-caps: petite-caps;}
#felgen_filter button { padding:5px; margin:3px; background:transparent; color:white;font-size:1em;}
#felgen_filter input { padding:5px; margin:3px; width:100px;}
#felgen_filter #p_min,
#felgen_filter #p_max { width:50px;}
#felgen_auswahl { margin:50px 0px; height:40px; width: 200px; clear:both; }
#felgen section p { margin-bottom:20px;}
#felgen section p span { color:var(--background-blue); font-size: 1em; font-weight: bold; display: inline;}
#felgen section span { font-size: 0.8em; display:block;}
#felgen_wrapper { width:100%; max-width: 2000px; text-align: left;}

#felgen .size span { display: inline-block; color:white; border: 2px solid blue; border-radius: 50%; padding:10px;}
#felgen .color { font-size:0.8em;}
#felgen .detail { font-size:0.8em; display: inline-block; color: white;}
#felgen a:hover { color:white; font-style: italic; font-size:1.1em; }
#felgen img { margin-bottom: 10px; width:200px;}


/*  vielleicht später mal - großes felgen bild mit hover
- bei section -> height:350px;background-position:right;background-size:cover;background-image:url(<?=ASSETS?>images/produkte/felgen/<?=substr(str_repeat(0, 3).$row['id'], - 3).'_'.$row['marke'].'_'.$row['typ']?>/<?=$file?>);"
#felgen section:hover .text { display:block; }
#felgen section .text { display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; padding:10px;} 
#felgen section { overflow:hidden; }
*/


#felgen .logo { display: flex; justify-content: center; align-items: center; background: none; box-shadow: none;}
#felgen .break { width:90%; height:0px;padding:0px; background-color: transparent; box-shadow: none; }
#felgen hr { border:1px solid rgb(1, 6, 71); margin-bottom: 50px; }



/* ################################################################################################################################################################# */

#simple_page { width:90%; max-width: 2000px; margin:0px 20px 50px; padding-top:0px;align-items:stretch;align-content:stretch; }
/*#simple_page .bilder { width:40%; text-align: right; margin-top:20px; }
#simple_page .bilder img { width:100px; height:100px !important; border-radius: 20px; object-fit: cover; object-position: top center; }*/
#simple_page .text { line-height:1.8em; width:50%; padding-left:50px;padding-top:50px; float:right; margin-right:20px; }
#simple_page #pic_grid {float:left; margin-left:20px;}
#simple_page .text h3 { color:rgb(2, 120, 255); margin-bottom: 20px;}
#simple_page .text ul { padding:10px;}
#simple_page .text ul li { margin-left:20px;}

#simple_page .text #carbon-koerper,
#simple_page .text #carbon-leinwand {background-color: black; padding:20px; border-radius: 30px; margin-top:20px;}
#simple_page .text #carbon-koerper div,
#simple_page .text #carbon-leinwand div { display: flex; justify-content: space-around; flex-wrap: wrap;}
#simple_page .text #carbon-koerper figure img,
#simple_page .text #carbon-leinwand figure img { width:200px;}
#simple_page .text #carbon-koerper > figcaption,
#simple_page .text #carbon-leinwand > figcaption { font-weight:bold; padding-bottom:10px; grid-column: 1 / -1;  text-align:center; color:blue; }

#simple_page .width_fix { min-width:800px; }

#simple_page .text .price span {font-weight: bold;}
#simple_page .text .price {padding-top:20px;}

#simple_page .text h1 { font-size:1.4em; margin-bottom:10px;}
#simple_page .text h1 span { color:rgb(2, 61, 255);}
#simple_page .text h1 .typ { color:rgb(2, 112, 255);}
#simple_page .text .marke_text { border-bottom: 2px solid rgb(2, 61, 255);}

#overview { display: flex; justify-content:center;align-items:center; flex-wrap: wrap; max-width: 2000px; margin:50px; position:relative; }
#overview section { width:350px; height:300px; position:relative; margin:10px; }
#overview section a:hover {color:white;}

#overview .logos a { display: flex; justify-content:center;align-items:center;  text-shadow: 0 0 15px black; color:rgb(2, 120, 255); background-color: rgba(8, 8, 8, 0.7);border-radius: 40px; width:250px; height:150px; text-align: center; font-weight: bold; font-size: 1.4em;} 
#overview .logos { width:250px; height:150px; background-size: cover; border-radius: 40px; } 



.boxes article { width:100%; min-width:800px; background-color:rgb(32, 32, 32); margin:10px 0px; padding:30px; border-radius: 30px; font-size: 0.9em; box-shadow: 0px 0px 5px 3px  rgba(2, 19, 255, 0.7); }
.boxes article img { width:200px; border-radius: 30px; margin-bottom: 10px; float: left;} 
.boxes article div { float:left; padding-left:40px; width:500px; }
.boxes .text .simple_wrap { display:flex; justify-content: space-around; flex-wrap: wrap; text-align: left; }

/* ################################################################################################################################################################ */

#table_bodykits {
  width: 100%;
  min-width: 800px;
  margin: 10px 0px;
  padding: 30px;
  font-size: 0.9em;
}

#table_bodykits td { vertical-align: top;padding-top:10px;}
#table_bodykits th { text-align: left; border-bottom:1px solid lightgrey;}
#table_bodykits p { font-size:0.8em; }

button {  width:100%; margin-top:20px; padding:10px; font-size: 1.0em;  font-weight:bold; color: white; background:linear-gradient(to top right, rgba(2, 19, 255, 0.7), rgba(2, 10, 122, 0.5));   }

.bodykit_list { width:50%; padding-top:120px; margin-left:20%;}
.bodykit_list select {
  display:block;
  width:300px;
  font-size: 1.3em;
  padding:10px;
  margin:10px 0px;
}
.bodykit_list option { background-color: rgb(196, 193, 193);}

.btn_dropbox { width:300px;
  margin-top:20px; padding:10px; font-size: 1.0em;  font-weight:bold; color: white; 
  background:linear-gradient(to top right, rgba(67, 67, 68, 0.7), rgba(12, 12, 12, 0.5));   }


/* ################################################################################################################################################################ */

#showroom { 
    display:flex; 
	  justify-content: center;
    flex-wrap : wrap;
    max-width: 2000px;
    margin:50px;
    position:relative;
}

#showroom section { width:350px; height:250px; position:relative; margin:10px;}
#showroom section:hover .text_overlap { width:355px; }
#showroom section a:hover {color:white;}
#showroom section img { display:block; width:100%; height:250px; object-fit: cover;}
#showroom section .text_overlap { width:0px; height:250px; position:absolute; top:0px; display:flex;justify-content: center; align-items: center; overflow: hidden; background-color: rgba(2, 19, 255, 0.3);}
#showroom section .text_overlap h2 { border:3px solid white; padding:5px;}


#showcar { width:100%;max-width: 2000px;  }
#showcar section {
    text-align:center;
    color:white;
    padding:10px;
    margin:20px;
    width:1000px;
    float:right;
}

#showcar #felgen_grid { width:45%; text-align: right; }
#showcar .text {  margin-left:50px; text-align: left; width:45%; }
#showcar .text h1 { font-size:1.4em; margin-bottom:20px;}
#showcar .text h1 span { color:rgb(2, 61, 255);}
#showcar .text h1 .typ { color:rgb(2, 112, 255);}
#showcar .text hr { margin:25px 0px; border-color: rgb(1, 6, 71);}
#showcar .text button { width:100%; margin-top:20px; padding:10px; font-size: 1.0em;  font-weight:bold; color: white; background:linear-gradient(to top right, rgba(2, 19, 255, 0.7), rgba(2, 10, 122, 0.5));   }

#showcar .anfrage_text { display: block; margin-top:40px; font-style:italic;}
#showcar .text table td,
#showcar .text table th { vertical-align:top; padding:20px;border-bottom:1px solid blue;}
#showcar .text table th { background:linear-gradient(to top right, rgba(2, 19, 255, 0.7), rgba(2, 10, 122, 0.5)); }

#showvideo { display:flex; 
  justify-content:center;
  align-items: center;
  flex-wrap : wrap;
  max-width: 2000px;
  position:relative;
  padding-top:50px; padding-bottom:50px;
  width:100%; background-color: rgb(22, 22, 22);}

#showvideo fieldset { padding:15px; border-color: blue; width:100%;}
#showvideo fieldset legend { margin:0px; padding:10px;  width:100px; font-size: 1.4em; }

#showvideo .left { float:left; width:400px;}
#showvideo img { cursor: pointer; margin-right:40px; }
#showvideo .videos object { box-shadow: 0px 0px 50px 5px black; width:1000px; height: 528px;; }
#showvideo .videos { 
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}



.watermark {
  position: relative;
}

.watermark .content {
  position: absolute; /* Position the background text */
  top: 10px; /* At the bottom. Use top:0 to append it to the top */
  left:-12px;
  background: rgba(255, 2, 2, 0.75);
  color: #f1f1f1; /* Grey text */
  width: 70px; /* Full width */
  padding: 5px; /* Some padding */
  transform: rotate(315deg);
  text-align: center;
  font-size: 0.8em;
}



.card {
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 210px 100px;
  grid-template-areas: "image" "text";
  border-radius: 18px;
  background: grey;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
  text-align: center;
  transition: 0.5s ease;
  cursor: pointer;
  margin:30px;
}

.card-image {
  grid-area: image;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}

.card-image img {
  grid-area: image;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  height: 200px;
  width:300px;
  object-fit: cover;
}

.card-text {
  grid-area: text;
  margin: 25px;
}
.card-text h2 {
  margin-top:0px;
  font-size:1.3em;
  color: blue;
}
.card:hover {
  transform: scale(1.15);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}



#kontakt { display:flex; justify-content: space-around;}
#kontakt form {  margin:50px;}
#kontakt form label { width:200px; margin-top:10px; display:inline-block;}
#kontakt form input { width:200px; line-height: 1.5em; }
#kontakt form textarea { width:400px; height:300px; margin:5px; }
#kontakt form .input_full { width:400px; margin:5px; }
#kontakt form button { float:right; padding:10px; }
#kontakt iframe { width:800px; min-height:540px; margin:50px;}
#main_picture iframe { display:none; }

#imprint { max-width: 1000px; font-size:0.8em; margin:10px; margin-bottom: 50px;}
#imprint ul li { margin-left:50px;}
#imprint section { margin-top:20px; }


#agb { max-width:1000px; font-size:0.65em; margin:10px; margin-bottom: 50px;}



#pic_grid img,
#gallery_grid img {height:100%; width:100%; object-fit:cover;}

#felgen_grid img {width:100%; height:100%; object-fit: cover; }

#felgen_grid,
#pic_grid,
#gallery_grid {
  display:grid;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-columns: repeat(4,180px);
  padding:60px 0px;
  justify-content:center;
}

#felgen_grid {grid-template-columns: repeat(3,33%);grid-template-rows: repeat(7,250px);}
#gallery_grid {grid-template-columns: repeat(5,15%); grid-template-rows: repeat(6,220px); }

#pic_grid .grid-item-1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 1; overflow: hidden;}
#pic_grid .grid-item-2 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 1; overflow: hidden;}
#pic_grid .grid-item-3 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 1; overflow: hidden;}
#pic_grid .grid-item-4 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; overflow: hidden;}
#pic_grid .grid-item-5 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; overflow: hidden;}
#pic_grid .grid-item-6 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; overflow: hidden;}
#pic_grid .grid-item-7 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; overflow: hidden;}
#pic_grid .grid-item-8 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 3; grid-row-end: 5; overflow: hidden;}
#pic_grid .grid-item-9 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; overflow: hidden;}
#pic_grid .grid-item-10 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; overflow: hidden;}
#pic_grid .grid-item-11 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 4; grid-row-end: 5; overflow: hidden;}
#pic_grid .grid-item-12 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; overflow: hidden;}
#pic_grid .grid-item-13 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; overflow: hidden;}
#pic_grid .grid-item-14 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 5; grid-row-end: 6; overflow: hidden;}
#pic_grid .grid-item-15 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 6; grid-row-end: 7; overflow: hidden;}
#pic_grid .grid-item-16 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 6; grid-row-end: 7; overflow: hidden;}
#pic_grid .grid-item-17 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 6; grid-row-end: 8; overflow: hidden;}
#pic_grid .grid-item-18 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 7; grid-row-end: 9; overflow: hidden;}
#pic_grid .grid-item-19 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 7; grid-row-end: 8; overflow: hidden;}
#pic_grid .grid-item-20 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#pic_grid .grid-item-21 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#pic_grid .grid-item-22 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#pic_grid .grid-item-23 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 9; grid-row-end: 9; overflow: hidden;}
#pic_grid .grid-item-24 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 9; grid-row-end: 9; overflow: hidden;}
#pic_grid .grid-item-25 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 9; grid-row-end: 9; overflow: hidden;}
#pic_grid .grid-item-26 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 10; grid-row-end: 12; overflow: hidden;}
#pic_grid .grid-item-27 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 10; grid-row-end: 11; overflow: hidden;}
#pic_grid .grid-item-28 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 10; grid-row-end: 11; overflow: hidden;}
#pic_grid .grid-item-29 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 11; grid-row-end: 12; overflow: hidden;}
#pic_grid .grid-item-30 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 11; grid-row-end: 13; overflow: hidden;}
#pic_grid .grid-item-31 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 12; grid-row-end: 13; overflow: hidden;}
#pic_grid .grid-item-32 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 12; grid-row-end: 13; overflow: hidden;}
#pic_grid .grid-item-33 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 12; grid-row-end: 13; overflow: hidden;}
#pic_grid .grid-item-34 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#pic_grid .grid-item-35 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#pic_grid .grid-item-36 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#pic_grid .grid-item-37 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 14; grid-row-end: 15; overflow: hidden;}
#pic_grid .grid-item-38 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 14; grid-row-end: 15; overflow: hidden;}
#pic_grid .grid-item-39 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 14; grid-row-end: 16; overflow: hidden;}
#pic_grid .grid-item-40 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 15; grid-row-end: 17; overflow: hidden;}
#pic_grid .grid-item-41 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 15; grid-row-end: 16; overflow: hidden;}
#pic_grid .grid-item-42 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 16; grid-row-end: 17; overflow: hidden;}
#pic_grid .grid-item-43 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 16; grid-row-end: 17; overflow: hidden;}
#pic_grid .grid-item-44 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 16; grid-row-end: 17; overflow: hidden;}
#pic_grid .grid-item-45 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 17; grid-row-end: 17; overflow: hidden;}
#pic_grid .grid-item-46 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 17; grid-row-end: 17; overflow: hidden;}
#pic_grid .grid-item-47 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 17; grid-row-end: 17; overflow: hidden;}
#pic_grid .grid-item-48 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 18; grid-row-end: 20; overflow: hidden;}
#pic_grid .grid-item-49 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 18; grid-row-end: 19; overflow: hidden;}
#pic_grid .grid-item-50 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 18; grid-row-end: 19; overflow: hidden;}
#pic_grid .grid-item-51 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 19; grid-row-end: 20; overflow: hidden;}
#pic_grid .grid-item-52 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 19; grid-row-end: 20; overflow: hidden;}



#felgen_grid .grid-item-1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; overflow: hidden;}
#felgen_grid .grid-item-2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; overflow: hidden;}
#felgen_grid .grid-item-3 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 4; grid-row-end: 6; overflow: hidden;}
#felgen_grid .grid-item-4 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; overflow: hidden;}
#felgen_grid .grid-item-5 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 6; grid-row-end: 7; overflow: hidden;}
#felgen_grid .grid-item-6 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 6; grid-row-end: 7; overflow: hidden;}
#felgen_grid .grid-item-7 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 6; grid-row-end: 7; overflow: hidden;}
#felgen_grid .grid-item-8 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 7; grid-row-end: 8; overflow: hidden;}
#felgen_grid .grid-item-9 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 7; grid-row-end: 8; overflow: hidden;}
#felgen_grid .grid-item-10 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}

#felgen_grid .grid-item-11 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#felgen_grid .grid-item-12 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#felgen_grid .grid-item-13 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 9; grid-row-end: 11; overflow: hidden;}
#felgen_grid .grid-item-14 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 9; grid-row-end: 10; overflow: hidden;}
#felgen_grid .grid-item-15 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 10; grid-row-end: 11; overflow: hidden;}
#felgen_grid .grid-item-16 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 11; grid-row-end: 12; overflow: hidden;}
#felgen_grid .grid-item-17 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 11; grid-row-end: 12; overflow: hidden;}
#felgen_grid .grid-item-18 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 11; grid-row-end: 13; overflow: hidden;}
#felgen_grid .grid-item-19 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 12; grid-row-end: 13; overflow: hidden;}
#felgen_grid .grid-item-20 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#felgen_grid .grid-item-21 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#felgen_grid .grid-item-22 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#felgen_grid .grid-item-23 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 14; grid-row-end: 15; overflow: hidden;}
#felgen_grid .grid-item-24 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 14; grid-row-end: 15; overflow: hidden;}



#gallery_grid .grid-item-1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; overflow: hidden;}
#gallery_grid .grid-item-2 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; overflow: hidden;}
#gallery_grid .grid-item-3 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: 2; overflow: hidden;}
#gallery_grid .grid-item-4 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 1; grid-row-end: 3; overflow: hidden;}
#gallery_grid .grid-item-5 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 1; grid-row-end: 2; overflow: hidden;}
#gallery_grid .grid-item-6 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; overflow: hidden;}
#gallery_grid .grid-item-7 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; overflow: hidden;}
#gallery_grid .grid-item-8 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; overflow: hidden;}
#gallery_grid .grid-item-9 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 2; grid-row-end: 3; overflow: hidden;}
#gallery_grid .grid-item-10 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; overflow: hidden;}
#gallery_grid .grid-item-11 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 3; grid-row-end: 4; overflow: hidden;}
#gallery_grid .grid-item-12 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; overflow: hidden;}
#gallery_grid .grid-item-13 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 3; grid-row-end: 4; overflow: hidden;}
#gallery_grid .grid-item-14 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; overflow: hidden;}
#gallery_grid .grid-item-15 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; overflow: hidden;}
#gallery_grid .grid-item-16 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 4; grid-row-end: 6; overflow: hidden;}
#gallery_grid .grid-item-17 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 4; grid-row-end: 5; overflow: hidden;}
#gallery_grid .grid-item-18 { grid-column-start: 5; grid-column-end: 7; grid-row-start: 4; grid-row-end: 5; overflow: hidden;}
#gallery_grid .grid-item-19 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 7; overflow: hidden;}
#gallery_grid .grid-item-20 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 5; grid-row-end: 6; overflow: hidden;}
#gallery_grid .grid-item-21 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 5; grid-row-end: 6; overflow: hidden;}
#gallery_grid .grid-item-22 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 5; grid-row-end: 6; overflow: hidden;}
#gallery_grid .grid-item-23 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 5; grid-row-end: 6; overflow: hidden;}
#gallery_grid .grid-item-24 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 6; grid-row-end: 7; overflow: hidden;}
#gallery_grid .grid-item-25 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 6; grid-row-end: 7; overflow: hidden;}
#gallery_grid .grid-item-26 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 6; grid-row-end: 7; overflow: hidden;}
#gallery_grid .grid-item-27 { grid-column-start: 5; grid-column-end: 7; grid-row-start: 6; grid-row-end: 8; overflow: hidden;}
#gallery_grid .grid-item-28 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 7; grid-row-end: 8; overflow: hidden;}
#gallery_grid .grid-item-29 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 7; grid-row-end: 8; overflow: hidden;}
#gallery_grid .grid-item-30 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 7; grid-row-end: 9; overflow: hidden;}
#gallery_grid .grid-item-31 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#gallery_grid .grid-item-32 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#gallery_grid .grid-item-33 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#gallery_grid .grid-item-34 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#gallery_grid .grid-item-35 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 8; grid-row-end: 9; overflow: hidden;}
#gallery_grid .grid-item-36 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 9; grid-row-end: 10; overflow: hidden;}
#gallery_grid .grid-item-37 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 9; grid-row-end: 10; overflow: hidden;}
#gallery_grid .grid-item-38 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 9; grid-row-end: 10; overflow: hidden;}
#gallery_grid .grid-item-39 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 9; grid-row-end: 11; overflow: hidden;}
#gallery_grid .grid-item-40 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 9; grid-row-end: 10; overflow: hidden;}
#gallery_grid .grid-item-41 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 10; grid-row-end: 12; overflow: hidden;}
#gallery_grid .grid-item-42 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 10; grid-row-end: 11; overflow: hidden;}
#gallery_grid .grid-item-43 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 10; grid-row-end: 11; overflow: hidden;}
#gallery_grid .grid-item-44 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 10; grid-row-end: 11; overflow: hidden;}
#gallery_grid .grid-item-45 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 11; grid-row-end: 12; overflow: hidden;}
#gallery_grid .grid-item-46 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 11; grid-row-end: 12; overflow: hidden;}
#gallery_grid .grid-item-47 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 11; grid-row-end: 12; overflow: hidden;}
#gallery_grid .grid-item-48 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 11; grid-row-end: 12; overflow: hidden;}
#gallery_grid .grid-item-49 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 12; grid-row-end: 13; overflow: hidden;}
#gallery_grid .grid-item-50 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 12; grid-row-end: 13; overflow: hidden;}
#gallery_grid .grid-item-51 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 12; grid-row-end: 14; overflow: hidden;}
#gallery_grid .grid-item-52 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 12; grid-row-end: 13; overflow: hidden;}
#gallery_grid .grid-item-53 { grid-column-start: 5; grid-column-end: 7; grid-row-start: 12; grid-row-end: 13; overflow: hidden;}
#gallery_grid .grid-item-54 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 13; grid-row-end: 15; overflow: hidden;}
#gallery_grid .grid-item-55 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#gallery_grid .grid-item-56 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#gallery_grid .grid-item-57 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#gallery_grid .grid-item-58 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 13; grid-row-end: 14; overflow: hidden;}
#gallery_grid .grid-item-59 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 14; grid-row-end: 15; overflow: hidden;}
#gallery_grid .grid-item-60 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 14; grid-row-end: 15; overflow: hidden;}
#gallery_grid .grid-item-61 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 14; grid-row-end: 15; overflow: hidden;}
#gallery_grid .grid-item-62 { grid-column-start: 5; grid-column-end: 7; grid-row-start: 14; grid-row-end: 16; overflow: hidden;}
#gallery_grid .grid-item-63 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 15; grid-row-end: 16; overflow: hidden;}
#gallery_grid .grid-item-64 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 15; grid-row-end: 16; overflow: hidden;}
#gallery_grid .grid-item-65 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 15; grid-row-end: 17; overflow: hidden;}
#gallery_grid .grid-item-66 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 16; grid-row-end: 17; overflow: hidden;}
#gallery_grid .grid-item-67 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 16; grid-row-end: 17; overflow: hidden;}
#gallery_grid .grid-item-68 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 16; grid-row-end: 17; overflow: hidden;}
#gallery_grid .grid-item-69 { grid-column-start: 5; grid-column-end: 6; grid-row-start: 16; grid-row-end: 17; overflow: hidden;}
#gallery_grid .grid-item-70 { grid-column-start: 6; grid-column-end: 7; grid-row-start: 16; grid-row-end: 17; overflow: hidden;}



/* Android 2.3 :checked fix */
@keyframes fake {
    from {
      opacity: 1;
    }
    to {
      opacity: 1;
    }
  }
  body {
    animation: fake 1s infinite;
  }
  
  .worko-tabs {
    margin: 20px;
  }
  .worko-tabs .state {
    position: absolute;
    left: -10000px;
  }
  .worko-tabs .flex-tabs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .worko-tabs .flex-tabs .tab {
    flex-grow: 1;
    max-height: 40px;
  }
  .worko-tabs .flex-tabs .panel {

    padding: 20px;
    height: auto;
    display: none;
    width: 100%;
    flex-basis: auto;
  }
  .worko-tabs .tab {
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    background-color: grey;
    cursor: hand;
    cursor: pointer;
    border-left: 10px solid #ccc;
  }
  .worko-tabs .tab:hover {
    border-left-color: rgb(2, 120, 255);
  }
  
  #tab-one:checked ~ .tabs #tab-one-label,
  #tab-two:checked ~ .tabs #tab-two-label,
  #tab-three:checked ~ .tabs #tab-three-label,
  #tab-four:checked ~ .tabs #tab-four-label {
    
    cursor: default;
    border-left-color: blue;
  }
  
  #tab-one:checked ~ .tabs #tab-one-panel,
  #tab-two:checked ~ .tabs #tab-two-panel,
  #tab-three:checked ~ .tabs #tab-three-panel,
  #tab-four:checked ~ .tabs #tab-four-panel {
    display: block;
  }
  
  @media (max-width: 600px) {
    .flex-tabs {
      flex-direction: column;
    }
    .flex-tabs .tab {
      border-bottom: 1px solid #ccc;
    }
    .flex-tabs .tab:last-of-type {
      border-bottom: none;
    }
    .flex-tabs #tab-one-label {
      order: 1;
    }
    .flex-tabs #tab-two-label {
      order: 3;
    }
    .flex-tabs #tab-three-label {
      order: 5;
    }
    .flex-tabs #tab-four-label {
      order: 7;
    }
    .flex-tabs #tab-one-panel {
      order: 2;
    }
    .flex-tabs #tab-two-panel {
      order: 4;
    }
    .flex-tabs #tab-three-panel {
      order: 6;
    }
    .flex-tabs #tab-four-panel {
      order: 8;
    }
  
    #tab-one:checked ~ .tabs #tab-one-label,
  #tab-two:checked ~ .tabs #tab-two-label,
  #tab-three:checked ~ .tabs #tab-three-label,
  #tab-four:checked ~ .tabs #tab-four-label {
      border-bottom: none;
    }
  
    #tab-one:checked ~ .tabs #tab-one-panel,
  #tab-two:checked ~ .tabs #tab-two-panel,
  #tab-three:checked ~ .tabs #tab-three-panel,
  #tab-four:checked ~ .tabs #tab-four-panel {
      border-bottom: 1px solid #ccc;
    }
  }


  .lb-loader,
  .lightbox{text-align:center;line-height:0;position:absolute;left:0}
  
  body.lb-disable-scrolling{overflow:hidden}
  .lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}
  .lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}
  .lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}
  .lb-outerContainer:after{content:"";display:table;clear:both}
  .lb-loader{top:43%;height:25%;width:100%}
  .lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}
  .lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
  .lb-container>.nav{left:0}
  .lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}
  .lb-next,.lb-prev{height:100%;cursor:pointer;display:block}
  .lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}
  .lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}
  .lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}
  .lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}
  .lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}
  .lb-dataContainer:after{content:"";display:table;clear:both}
  .lb-data{padding:0 4px;color:#ccc}
  .lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}
  .lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}
  .lb-data .lb-caption a{color:#4ae}
  .lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}
  .lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}
  .lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}



  
#cookie-popup  { 
  text-align: center; 
  background-image: url(../images/page/back_big.jpg);
  background-size: cover;
  position: fixed;
  bottom: 0px; 

  z-index: 9999;
  font-size:14px; 
  line-height:20px;
  padding: 20px;
  width:100%;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }
 
#cookie-popup.hidden {
  display: none;
}

#cookie-popup .hinweis { float:left;}
#cookie-popup  button { float:right; line-height:20px; padding:5px; width:100px;}



/* Hauptmenu */


nav {
  width: 100%; 
  background: rgba(37, 37, 37,1.8);
  background-color:rgba(22, 22, 22,0.8);
 /* background-image: url(../images/page/back_big.jpg);*/
  background-size: cover;
  /* bakground-image: linear-gradient(to top, rgba(84, 87, 86, 0.3) 35%, rgba(0, 247, 214, 0.3) 50%, #3a3a3a 70%);*/
  font-size:0.85em;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: bold;
  z-index:1;
  border-bottom: 5px solid blue;
  padding-top:10px;
  position: fixed;
  top:0px;
}

nav ul {
  margin: 0px;
  padding: 0px;
  padding-top:20px;
  
}
 
nav a {
  display: block;
  text-decoration: none;
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;

}
 
nav ul li:hover {
  /*background: linear-gradient(to top right, rgba(0, 128, 128, 0.7), rgba(0, 128, 128, 0.3));   */
  background: linear-gradient(to top right, rgba(2, 19, 255, 0.7), rgba(2, 10, 122, 0.5));  
}
 
nav ul li a {
    padding: 20px 40px;
    color:white !important; 
}

nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #333;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
  padding:0px;
}
 
nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}
 
nav ul ul li a {
  padding: 10px 20px;
}

nav ul li:hover > ul {
  top: 100%;
  left: 0;
}

nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

nav ul li.submenu > a:after {
  position: relative;
  float: right;
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}

nav ul ul li.submenu a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

nav ul ul li:last-child {
  border-bottom: none;
}

.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  padding-top: 10px !important;
  border-bottom: 5px solid blue;
}

nav ul li.submenu,
nav ul li.nosubmenu { border-top:3px solid grey;}

.info-box {
  display: none;
  z-index:2;
}

.info:hover + .info-box {
  position:absolute;
  top:70px;
  right:50px;
  display: block;
  color: white;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 5px blue;
  /*background: linear-gradient(to top right, rgba(0, 128, 128, 0.7), rgba(0, 128, 128, 0.3));*/
  background: linear-gradient(to top right, rgba(2, 19, 255, 0.7), rgba(2, 19, 255, 0.3));  
  padding:20px;
  text-align:center;
}

.info { cursor: pointer;}