@charset "utf-8";
/* Google Font */
@import url("https://fonts.googleapis.com/css?family=Hind+Guntur:300,400,500,600,700&display=swap");

/* ========== Base ML ========== */
html, body {
  margin: 0;
  padding: 0;
}
body, #body {
	font-family: "Hind Guntur", sans-serif!important;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #201f1f;
	text-align: left;
}

.Stil1 {
	color: #ff4900;
}
 .Stil1, .Stil3 {
	font-weight:600 
} 

/* Technische Daten standardmäßig ausblenden, mobil per MQ ein */
#art_technData,
#art_technData_mobile {
  display: none !important;
}

/* ========== Layout-Container ========== */
#header, #menu, #menu_main, #menu_sub, #body, #footer, #bottom_main {
  max-width: 1390px;
  width: 99%;
}

#header_container, #menu_main, #body, #footer, #menu_sub {
  width: 1200px;
}

/* ========== Header ========== */
#header {
  background: linear-gradient(to bottom, #fff 0px, #ccc 185%);
  height: 57px;
  padding-top: 16px;
}
#header_container > img,
#top,
#footer > img {
  clear: both;
  float: left;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 10px 15px;
}
#top {
  margin-top: 20px;
  width: 90%;
}

/* ========== Menü Desktop/Mobil ========== */
#menu {
  border-bottom: 6px solid #ff4900;
  height: 31px;
  clear: both;
}

/* Desktop */
#menu_main { display: block; }
#menu_main > .menu_kat,
#menu_main > .menu_sep { float: left; }

.menu_kat,
.menu_kat > a {
  color: #3A3A3A;
  font-size: 0.9em;
  height: 30px;
  margin-top: 1px;
  padding-top: 6px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 11.5%;
}
.menu_sep {
  text-align: center;
  width: 1%;
}
.menu_sep:last-child { display: none; }

.kat_active,
.menu_kat:hover {
  cursor: pointer;
  background-color: #ff4900;
  transition: background-color 300ms ease;
}
.kat_active > a,
.menu_kat:hover > a {
  color: #FFF;
  text-decoration: none;
  transition: color 500ms ease;
}

/* Submenü-Container (Desktop) */
.submenu_container {
  background-color: #ff4900;
  border-top: 1px solid #fff;
  display: none;
  float: left;
  margin-left: 20px;
  margin-top: 37px;
  position: absolute;
  z-index: 10;
}
#menu:hover .submenu_outercontainer,
.menu_kat:hover + .submenu_container,
.submenu_container:hover {
  display: block;
}

.submenu_outercontainer {
  display: none;
  background-color: #ff4900;
  height: 31px;
  margin-top: 38px;
  max-width: 1390px;
  position: absolute;
  width: 98.9%;
}
.submenu_kat {
  background-color: #ff4900;
  float: left;
  height: 27px;
}
.submenu_kat > a {
  color: #fff;
  float: left;
  font-size: 0.9em;
  padding: 3px 5px 0;
  text-decoration: none;
}
.submenu_kat:hover > a {
  background-color: #fff;
  color: #ff4900;
}

/* Mobile Menü */
#menu_mobile {
  background: rgba(0,0,0,.8);
  float: none;
  height: 100%;
  margin-left: -100%;
  position: fixed;
  transition: margin-left 300ms ease;
  width: 100%;
}
#menu_mobile_button {
  display: none;
  margin-left: 15px;
  margin-top: 22px;
}
#menu_mobile_hamburger,
#menu_mobile_hamburger::before,
#menu_mobile_hamburger::after {
  background-color: #3A3A4A;
  border-radius: 4px;
  height: 3px;
  position: absolute;
  transition: transform .15s ease;
  width: 35px;
  content: "";
  display: block;
}
#menu_mobile_hamburger {
  background-color: #666;
  height: 6px;
}
#menu_mobile_hamburger::before {
  border-top: 3px solid #666;
  border-bottom: 3px solid #666;
  height: 0;
  top: -11px;
  transition: top .2s ease .24s, opacity .2s ease 0s;
}
#menu_mobile_hamburger::after {
  border-top: 3px solid #666;
  border-bottom: 3px solid #666;
  bottom: -11px;
  height: 0;
  transition: bottom .2s ease .24s, transform .2s cubic-bezier(.55,.055,.675,.19) 0s;
}
#menu_mobile > a {
  height: 100%;
  position: absolute;
  right: 0;
  width: 14%;
}
#menu_mobile_categories {
  background-color: #fff;
  border-radius: 2px;
  border-top: 50px solid #ff4900;
  box-shadow: 4px 23px 25px rgba(0,0,0,.5);
  height: 690px;
  padding-top: 5px;
  position: absolute;
}
.menu_kat_mob,
.menu_kat_mob > a {
  color: #3A3A3A;
  padding: 5px;
  text-decoration: none;
}
.menu_kat_mob {
  border-bottom: 3px solid #ff4900;
  clear: both;
  float: left;
  height: 5%;
  position: relative;
  width: 97%;
}
.menu_kat_mob > a { font-size: 1.3em; }

/* KORREKTUR: Klassenname angleichen (vorher .menu_subkat_mob) */
.submenu_kat_mob {
  border-left: 6px solid #ff4900;
  display: none;
  float: left;
  width: 50%;
}
.menu_kat_mob:hover + .submenu_kat_mob { display: block; }
.submenu_kat_mob a {
  color: #fff;
  background-color: #ff4900;
  border-left: 1px solid #fff;
  display: block;
  padding: 5px;
  width: 90%;
}

/* Checkbox-Steuerung für Mobile-Menü (optional) */
#show_mobile_menu:checked ~ div#menu_mobile {
  display: block !important;
}

/* ========== Body / Galerie ========== */
#body { margin-top: 50px; }

#top_left, #top_right {
  float: left;
  padding-left: 15px;
}
#top_left { width: 40%; }
#top_right {
  float: right;
  padding: 0 15px 0 15px;
  width: 50%;
}

#art_technData {
  background-color: #f0f0f0;
  font-size: .9em;
  font-weight: 300;
  height: 195px;
  padding-top: 15px;
}

#art_technData_mobile {
  background-color: #f0f0f0;
  clear: both;
  font-size: .9em;
  font-weight: 300;
  padding-top: 15px;
}

#art_technData li,
#art_technData_mobile li {
  font-size: .8em;
  list-style: outside "• ";
  padding-bottom: 5px;
}

#top_right > a {
  display: none;
  height: 600px;
  position: absolute;
  width: 50%;
  z-index: 1;
}

.mainpic {
  display: none;
  max-height: 600px;
  max-width: 600px;
}

.ChangeRadio { display: none; }

.PrevPic,
#PrevPic_mobile > .PrevPic {
  cursor: pointer;
  padding: 15px 30px 0;
}
#top_left .PrevPic:first-child { padding-left: 0; }

/* Bildumschaltung */
#chkPrevPic1:checked ~ img#MainPic1 { display: block; }
#chkPrevPic2:checked ~ img#MainPic2 { display: block; }
#chkPrevPic3:checked ~ img#MainPic3 { display: block; }
#chkPrevPic4:checked ~ img#MainPic4 { display: block; }
#chkPrevPic5:checked ~ img#MainPic5 { display: block; }
#chkPrevPic6:checked ~ img#MainPic6 { display: block; }
#chkPrevPic7:checked ~ img#MainPic7 { display: block; }
#chkPrevPic8:checked ~ img#MainPic8 { display: block; }

/* Lightbox */
.lightbox {
  background: rgba(0,0,0,.8);
  height: 0;
  left: 0;
  opacity: 0;
  padding: 25px 0;
  position: absolute;
  top: 0;
  transition: opacity .5s ease 100ms;
  width: 100%;
  z-index: 50;
}
.lb_center { clear: both; }
.lightbox_close > img { float: right; margin-right: 20px; }
.icon-lb-backward, .icon-lb-forward { margin-top: 30%; vertical-align: top; }

/* Einheitliches Target-Verhalten für alle Lightboxen */
.lightbox > .lb_center,
.lightbox > .lb_center > a > .lightbox_pic { height: 0; }
.lightbox:target { height: 80%; opacity: 1; }
.lightbox:target > .lb_center { height: 80%; }
.lightbox:target > .lb_center > a > .lightbox_pic { height: 800px; }

/* ========== Unterer Bereich ========== */
#bottom_main {
  border: 1px solid #D1D1D1;
  clear: both;
  float: left;
  margin-top: 35px;
}

.desc_tab {
  user-select: none;
  background-color: #F1F1F1;
  border-top: 4px solid #F1F1F1;
  float: left;
  font-size: .8em;
  font-weight: 400;
  height: 32px;
  padding-top: 4px;
  text-align: center;
  width: 14.28%;
}
.desc_tab > label { cursor: pointer; }
.desc_tab:hover {
  background-color: #FFF;
  border-top: 4px solid #ff4900;
  transition: background-color 400ms ease, border-top 400ms ease;
}

/* Nur ein Tab "Details" vorhanden */
.ChangeDesc,
.desc_container { display: none; }
#desc_Details:checked ~ div#cnt_details { display: block; }
#desc_Details:checked ~ label#tab_details {
  background-color: #FFF;
  border-top: 4px solid #ff4900;
}

.desc_container {
  background-color: #FFF;
  clear: both;
  padding: 22px 0 15px 11px;
  width: 99%;
}

/* ========== Footer ========== */
#footer {
  clear: both;
  float: left;
  padding-top: 30px;
}
#footer > img:first-child { padding-bottom: 20px; }
#footer_copyright {
  float: left;
  font-size: .8em;
  padding: 10px 0 0 15px;
}

/* ========== Specials / Artikelboxen ========== */
.SpecialPic { clear: both; float: left; }
.artikel_box1 { clear: both; margin-bottom: 20px; }
.artikel_box2 {
  float: left;
  margin-bottom: 20px;
  width: 50%;
}
.artikel_box2 > img { width: 50%; }

/* Meta-Infos */
.artid, .changedate, .hiddencat {
  clear: both;
  color: #fff;
  float: left;
  font-size: 10px;
}

/* ========== Responsive ========== */

/* >= 1200px: feste 1200er Breite */
@media (min-width:1200px) {
  #header_container, #menu_main, #body, #footer, #menu_sub { width: 1200px; }
  #menu_main { display: block; }
  #menu_mobile, #PrevPic_mobile { display: none; }
}

/* >= 992px (Desktop/Tablet quer) */
@media (min-width:992px) {
  .mainpic { width: 100%; }
  /* Lightbox-Links nur für das aktive Bild anzeigen */
  #chkPrevPic1:checked ~ a#linkLB1,
  #chkPrevPic2:checked ~ a#linkLB2,
  #chkPrevPic3:checked ~ a#linkLB3,
  #chkPrevPic4:checked ~ a#linkLB4,
  #chkPrevPic5:checked ~ a#linkLB5,
  #chkPrevPic6:checked ~ a#linkLB6,
  #chkPrevPic7:checked ~ a#linkLB7,
  #chkPrevPic8:checked ~ a#linkLB8 { display: block !important; }
}

/* 768px–991px (Tablet hochkant) */
@media (min-width:768px) and (max-width:991px) {
  #header_container, #menu_main, #body, #footer, #menu_sub { width: 100%; }
  #header_container { float: left; margin-top: 20px; width: 80%; }
  #header_container > img { float: none; margin-top: -10px; }
  #body { margin-top: 10px; }
  .mainpic { width: 100%; }
  .desc_tab { font-size: .8em; }
  #menu { height: 0; }
  #menu_main { display: none; }
  #menu_mobile_button {
    clear: both; display: block; float: left;
    margin-left: 15px; margin-top: 22px; width: 15%;
  }
  #menu_mobile_categories { width: 87%; }
  .submenu_outercontainer { display: none; }
  div#menu_mobile:target { margin-left: -1px; transition: margin-left 300ms ease; }
  .desc_container { padding-right: 10px; width: 97.2%; }
  .PrevPic { padding: 15px 15px 0; }
  #top_right { float: left; padding-left: 15px; padding-right: 0; width: 50%; }
  #PrevPic_mobile { display: none; }
  .lightbox { display: none; } /* Lightbox deaktiviert in diesem Bereich */
  .artikel_box1, .artikel_box2 { width: 100% !important; }
  .artikel_box2:last-child { padding-bottom: 60px !important; }
}

/* 480px–767px (Phones groß) */
@media (min-width:480px) and (max-width:767px) {
  #header_container, #menu_main, #body, #footer, #menu_sub { width: 100%; }
  #header_container { float: left; margin-top: 20px; width: 80%; }
  #header_container > img { float: none; margin-top: -10px; }
  #menu { height: 0; }
  #body { margin-top: 10px; }
  #top_left, #top_right { margin-left: 0; width: 100%; }
  #top_right { padding-right: 0; }
  #top_right > a { display: none; }
  #top { line-height: 1.2; margin: 0 15px; }
  .desc_tab { font-size: .7em; height: 29px; line-height: 1; padding-top: 7px; width: 16.6%; }
  .desc_container { width: 97.4%; }
  #footer_battery { padding: 20px; width: 90%; } /* (falls vorhanden) */
  .PrevPic { cursor: pointer; max-height: 60px; padding: 0 0 0 3px; }
  #art_technData { display: none; }
  #art_technData_mobile { display: block; height: 100%; padding: 15px 0; }
  #menu_mobile_button {
    clear: both; display: block; float: left;
    margin-left: 15px; margin-top: 22px; width: 15%;
  }
  #menu_mobile_categories { width: 87%; }
  #menu_main { display: none; }
  .submenu_outercontainer { display: none; }
  #menu_mobile { float: none; }
  div#menu_mobile:target { margin-left: -1px; transition: margin-left 300ms ease; }
  #PrevPic_mobile { clear: both; display: block; padding-top: 20px; width: 100%; }
  #top_left { display: none; }
  .lightbox { display: none; }
  .mainpic { margin: auto; max-height: 430px; max-width: 100%; }
  #tab_rest { display: none; }
  .artikel_box1, .artikel_box2 { width: 100% !important; }
  .artikel_box2:last-child { padding-bottom: 60px !important; }
}

/* 0px–479px (Phones klein) */
@media (max-width:479px) {
  #header_container, #menu_main, #body, #footer, #menu_sub { width: 100%; }
  #header_container { float: left; margin-top: 20px; width: 80%; }
  #header_container > img { float: none; margin-top: -10px; }
  #menu { height: 0; }
  #body { margin-top: 10px; }
  #top { line-height: 1.2; margin: 0 15px; }
  #top_left, #top_right { margin-left: 0; width: 100%; }
  #top_right { padding-right: 0; }
  #top_right > a { display: none; }
  .desc_tab { font-size: .7em; height: 29px; line-height: 1; padding-top: 7px; width: 16.6%; }
  .desc_container { padding-right: 10px; width: 93.6%; }
  .PrevPic { cursor: pointer; max-height: 60px; padding: 0 0 0 3px; }
  #art_technData { display: none; }
  #art_technData_mobile { display: block; height: 100%; padding: 15px 0; }
  #menu_mobile_button {
    clear: both; display: block; float: left;
    margin-left: 15px; margin-top: 22px; width: 15%;
  }
  #menu_mobile_categories { width: 87%; }
  #menu_main { display: none; }
  .submenu_outercontainer { display: none; }
  div#menu_mobile:target { margin-left: -1px; transition: margin-left 300ms ease; }
  #PrevPic_mobile { clear: both; display: block; padding: 20px 0; width: 100%; }
  #top_left { display: none; }
  .lightbox { display: none; }
  .mainpic { margin: auto; max-height: 430px; max-width: 99%; }
  #tab_rest { display: none; }
  .artikel_box1, .artikel_box2 { width: 100% !important; }
  .artikel_box2:last-child { padding-bottom: 60px !important; }
}