/* Sidebar für Show Kategorie */
#sidemenue { position: relative; left: 20px; width: 280px; margin-bottom: 30px; }
.sidebar { position: relative; left: 0px; width: 100%; border: 1px solid #CCC; float: left; margin-bottom: 30px; }
.sidebar p { font-size: larger; text-align: center; }
.sidebar select { width: 200px; padding: 5px; margin-left: 40px; margin-bottom: 10px; border: 1px solid #CCC;}

.aswitch { position: relative; width: 95px; height: 31px; cursor: pointer; margin: 10px auto; }
.btgrid { background: url(../designpics/bt_liste-kachel_l.png) no-repeat; }
.btlist { background: url(../designpics/bt_liste-kachel_k.png) no-repeat; }

/* Showroom - Übersicht Kategorien */
#showroom h2 { font-size: 26px; font-weight: 400; text-align: left; margin-bottom: 30px; border-bottom: 1px dotted #F65212; padding-bottom: 5px; font-variant: small-caps; }
#showroom a { color: #000; }
#showroom .preis1, #shop .preis1 { font-family: Calibri, 'DejaVu Sans', Verdana, Arial, sans-serif; font-size: larger; }
#showroom .preis2, #shop .preis2 { font-family: Calibri, 'DejaVu Sans', Verdana, Arial, sans-serif; font-size: larger; color: #A02B2B; }
#showroom .artikel { font-size: larger; color: #A02B2B; }
#showroom .artikelnummer { font-size: smaller; color: #000; }

/* Ansicht Kacheln */
#showroom { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; display: flex;  flex-wrap: wrap; gap: 20px; margin-bottom: 20px;}
.grid { position: relative; flex-grow: 0; flex-shrink: 2; flex-basis: auto; width: 200px; height: auto; padding-bottom: 10px; float: left; text-align: center; overflow: hidden; border: 1px solid #A02B2B; border-radius: 5px; box-shadow: 1px 1px 3px #808080;}
.grid img { width: auto; height: auto; max-height: 250px; transition: all 1s; margin-bottom: 20px;}
.grid:hover img { transform: scale(1.1);}
.grid p {padding: 0 10px 20px 10px; text-align: center !important;}
.grid .details {position: absolute; left: -1px; bottom: -1px; width: 100%; height: 30px; font-size: 18px; text-align: center; border: 1px solid #CCC; padding-top: 3px; }
.grid .details:hover { color: white; background: #A02B2B; }
.grid .login_bt {position: absolute; left: -1px; bottom: -1px; width: 100%; height: 60px; font-size: 14px; text-align: center; border: 1px solid #CCC; padding-top: 5px; }
.grid .login_bt:hover { color: white; background: #A02B2B; }

/* Ansicht Liste */
.list { position: relative; width: 100%; height: auto; border-bottom: 1px solid #CCC; margin-bottom: 10px; padding-bottom: 10px; }
.list img { width: 200px; height: auto; transition: all 1s; float: left; margin-right: 20px; border: 1px solid #EEE; }
.list:hover img { transform: scale(1.1);}
.list p {margin-left: 20px; vertical-align: middle;}
.list .details, .list .login_bt {position: absolute; bottom: 15px; right: 0px; border: 1px solid #CCC; padding: 3px 5px; margin-left: 10px; text-align: center;}
.list .details:hover,  .list .login_bt:hover { color: white; background: #A02B2B; }
.list .artikel {font-weight: 300; font-size: 16px;}

/*Styling der Pagenavigation*/
#pagebar { border-top: 1px dotted #888888; padding: 5px 0px 5px 0px;}
#pagebar a { text-decoration: none;}
.pagebar-navlink-prev, .pagebar-navlink-next { font-size: 24px; font-weight: bold; color: #A02B2B; padding: 2px 10px; margin-right: 5px;}
.pagebar-navlink-prev:hover, .pagebar-navlink-next:hover { font-size: 24px; font-weight: bold; color: white; background-color: #A02B2B; padding: 2px 10px; margin-right: 5px; border-radius: 5px;}
.pagebar-pagelink { font-size: 20px; font-weight: normal; color: #A02B2B; padding: 6px 10px; margin-right: 5px; margin-top: -5px;}
.pagebar-pagelink:hover { font-size: 20px; font-weight: normal; color: white; background-color: #A02B2B; padding: 6px 10px; margin-right: 5px; border-radius: 5px;}
.pagebar-curpage { font-size: 20px; font-weight: bold; color: #333; padding: 3px 10px; margin-right: 10px;}

/* Shopeinstellungen allgemein */
.shopheader { margin-bottom: 50px; }
#shop h2 { font-weight: 600; font-size: larger;}
#shop h4 { width: 100%; margin-bottom: 15px; text-align: center; font-size: 130%; }
#shop a:link, #shop a:visited { color: #A02B2B !important; }
#shop a:hover, #shop a:focus { color: #824509 !important; }
p.zurueck { font-size: 20px; margin-bottom: 30px !important; }
p.ausverkauft2 { color: #000; background: rgba(253, 207, 77, 0.8); font-size: larger; margin-bottom: 10px; padding: 10px; text-align: center !important; }
.shopbutton, .kassebutton { font-family: 'Playfair Display', Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; text-align: center; border: 1px solid #CCC; padding: 3px 10px; cursor: pointer; background: white; margin-left: 50px; vertical-align: bottom; }
.shopbutton:hover, .kassebutton:hover {color: white !important; background: #A02B2B;}
.shopbutton { margin-bottom: 15px; }
.sozialmedia {padding-top: 5px; padding-left: 40px; margin-bottom: 5px;}
.sm_fb, .sm_tw, .sm_ma { float: left; width: 32px; height: 32px; margin-left: 10px; }
.sm_fb { background: url(/designpics/bt_sm.png) no-repeat -32px 0px;}
.sm_tw { background: url(/designpics/bt_sm.png) no-repeat -32px -96px;}
.sm_ma { background: url(/designpics/bt_sm.png) no-repeat -32px -128px;}
.sm_fb a, .sm_tw a, .sm_ma a {display: block; width: 32px; height: 32px;}
.sm_fb span, .sm_tw span, .sm_ma span {display: none;}
.sozialmedia .sm_fb:hover {color: #c5a059; background: url(/designpics/bt_sm.png) no-repeat 0px 0px;}
.sozialmedia .sm_tw:hover {color: #55a34a; background: url(/designpics/bt_sm.png) no-repeat 0px -96px;}
.sozialmedia .sm_ma:hover {color: #55a34a; background: url(/designpics/bt_sm.png) no-repeat 0px -128px;}
.shopdetails td { vertical-align: top; padding: 5px; }
.firsttd { padding-right: 50px !important; }

/* Kasse */
.eingabeartikel {font-size: 14px; padding: 3px; width: 250px; background: transparent; border: 1px solid #DDD;}
#warentab { position: relative; width: 760px; margin: auto; }
#warentab td {font-size: 14px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;}
#warentab th {font-size: 14px; color: #A02B2B; border-bottom: 1px solid #51291A; padding: 5px; background: url(/designpics/bg_th.png) repeat;}
.gesamtpreis {border-top: 1px solid #51291A; text-align: right;}
.gesamtpreis2 {border-top: 1px solid #51291A; border-bottom: 3px double #51291A; text-align: right;}
.korbbutton {color: #A02B2B; font-weight: 400; font-size: 12px; text-align: center; border: 1px solid #A02B2B; background: #FFF; border-radius: 5px; padding: 2px 10px;}
.korbbutton:hover {color: #FFF; font-weight: 400; font-size: 12px; text-align: center; border: 1px solid #A02B2B; background: #A02B2B; border-radius: 5px; padding: 2px 10px;}
.printbutton {color: #222; font-weight: 400; font-size: 18px; text-align: center; border: 1px solid #dea303; background: white; border-radius: 5px; padding: 5px 10px; cursor: pointer; margin-right: 50px;}
.printbutton:hover {color: #222; font-weight: 400; font-size: 18px; text-align: center; border: 1px solid #dea303; background: #EEE; border-radius: 5px; padding: 5px 10px; cursor: pointer;}
#drucklogo { display: none; width: 0px; height: 0px; }
.sendbutton { position: relative; width: 600px; margin: auto; }
.bestellnummer { position: relative; width: 760px; margin: auto; }
.hinweis { width: 100%; text-align: center !important; border: 1px solid #A02B2B; background-image: linear-gradient(to bottom right, #FFF4E5, #FFCE8A); padding: 10px; color: black; }

/* Dashboard */
.ui-tabs li.ui-tabs-active { background: #FFF; border-left: 2px solid #A02B2B; border-top: 2px solid #A02B2B; border-right: 2px solid #A02B2B;  }

@media (min-width: 1600px) {
  /* Bei Showkategorie mobile Ansicht von Sortieren und Ansicht verstecken */
  #ansicht { display: none; }

  /* Shop */
  #produktfotos { position: relative; width: 400px; height: auto; margin-right: 50px; float: left; }
  #slideshow { width: 400px; height: auto; margin-bottom: 30px;}
  #slideshow img { max-width: 400px; max-height: 400px; border: 1px solid #CCC; border-radius: 10px; }
  #slideshow img:hover { border-color: #A02B2B; cursor: pointer; }
  #thumbs { list-style-type: none; }
  #thumbs li { float: left; margin-right: 15px; }
  #thumbs img {border: 2px solid #CCC; height: 80px; width: auto; border-radius: 5px; cursor: pointer; }
  #thumbs img:hover { border-color: #A02B2B }

  /* weitere Infos */
  #produktorder { position: relative; width: auto; height: auto; margin-left: 500px;  }
  .np3 {text-align: left; font-size: 24px; font-weight: 400; margin-bottom: 30px;}
  .np4 {text-align: left; text-decoration: line-through; font-size: larger; font-weight: 400; margin-bottom: 100px !important;}
  #produktorder form { margin-bottom: 60px; }
  #produktorder h2 { font-style: normal !important; font-size: 36px !important; font-weight: 600 !important; text-align: left !important; }
  #produktorder h3 { font-style: normal; font-size: 18px; text-align: left; margin-bottom: 10px; }
  #produktorder h4 { font-style: normal; font-size: 14px; text-align: left; margin-bottom: 10px; }
  #produktorder p { margin-bottom: 20px; line-height: 22px; }
  #produktorder ul, #produktorder ol { margin-left: 30px; margin-bottom: 20px; }
  #produktorder ul li { margin-bottom: 5px; line-height: 22px; list-style-type: square; }
  #produktorder ol li { margin-bottom: 5px; line-height: 22px; }
  #menge { padding: 2px; }

}

@media (min-width: 1300px) and (max-width: 1599px){
  /* Bei Showkategorie mobile Ansicht von Sortieren und Ansicht verstecken */
  #ansicht { display: none; }

  /* Shop */
  #produktfotos { position: relative; width: 400px; height: auto; margin-right: 50px; float: left; }
  #slideshow { width: 400px; height: auto; margin-bottom: 30px;}
  #slideshow img { max-width: 400px; max-height: 400px; border: 1px solid #CCC; border-radius: 10px; }
  #slideshow img:hover { border-color: #A02B2B; cursor: pointer; }
  #thumbs { list-style-type: none; }
  #thumbs li { float: left; margin-right: 15px; }
  #thumbs img {border: 2px solid #CCC; height: 80px; width: auto; border-radius: 5px; cursor: pointer; }
  #thumbs img:hover { border-color: #A02B2B }

  /* weitere Infos */
  #produktorder { position: relative; width: auto; height: auto; margin-left: 450px;  }
  .np3 {text-align: left; font-size: 24px; font-weight: 400; margin-bottom: 30px;}
  .np4 {text-align: left; text-decoration: line-through; font-size: larger; font-weight: 400; margin-bottom: 100px !important;}
  #produktorder form { margin-bottom: 60px; }
  #produktorder h2 { font-style: normal !important; font-size: 30px !important; font-weight: 600; text-align: left !important; }
  #produktorder h3 { font-style: normal; font-size: 18px; text-align: left; margin-bottom: 10px; }
  #produktorder h4 { font-style: normal; font-size: 14px; text-align: left; margin-bottom: 10px; }
  #produktorder p { margin-bottom: 20px; line-height: 22px; }
  #produktorder ul, #produktorder ol { margin-left: 30px; margin-bottom: 20px; }
  #produktorder ul li { margin-bottom: 5px; line-height: 22px; list-style-type: square; }
  #produktorder ol li { margin-bottom: 5px; line-height: 22px; }
  #menge { padding: 2px; }

}

@media (min-width: 960px) and (max-width: 1299px) {
  /* Bei Showkategorie mobile Ansicht von Sortieren und Ansicht verstecken */
  #ansicht { display: none; }

  /* Shop */
  #produktfotos { position: relative; display: table; width: 100%; height: auto; margin-bottom: 15px; float: left; }
  #slideshow { display: table-cell; width: 100%; height: auto; margin-bottom: 30px; float: left; text-align: center;}
  #slideshow img { width: 300px; height: auto; border: 1px solid #CCC; border-radius: 10px; }
  #slideshow img:hover { border-color: #A02B2B; cursor: pointer; }
  #thumbs { list-style-type: none; position: relative; width: 100%; margin: auto; }
  #thumbs li { float: left; margin-right: 15px; }
  #thumbs img {border: 2px solid #CCC; height: 80px; width: auto; border-radius: 5px; cursor: pointer; }
  #thumbs img:hover { border-color: #A02B2B }

  /* weitere Infos */
  #produktorder { position: relative; display: table; width: 100%; height: auto;  }
  .np3 {text-align: left; font-size: 24px; font-weight: 400; margin-bottom: 30px;}
  .np4 {text-align: left; text-decoration: line-through; font-size: larger; font-weight: 400; margin-bottom: 100px !important;}
  #produktorder form { margin-bottom: 60px; }
  #produktorder h2 { font-style: normal !important; font-size: 28px !important; font-weight: 600; text-align: left !important; }
  #produktorder h3 { font-style: normal; font-size: 18px; text-align: left; margin-bottom: 10px; }
  #produktorder h4 { font-style: normal; font-size: 14px; text-align: left; margin-bottom: 10px; }
  #produktorder p { margin-bottom: 20px; line-height: 22px; }
  #produktorder ul, #produktorder ol { margin-left: 30px; margin-bottom: 20px; }
  #produktorder ul li { margin-bottom: 5px; line-height: 22px; list-style-type: square; }
  #produktorder ol li { margin-bottom: 5px; line-height: 22px; }
  #menge { padding: 2px; }

}

@media (min-width: 768px) and (max-width: 959px) {
  /* Bei Showkategorie mobile Ansicht von Sortieren und Ansicht verstecken */
  #ansicht { display: none; }

  /* Shop */
  #produktfotos { position: relative; display: table; width: 100%; height: auto; margin-bottom: 15px; float: left; }
  #slideshow { display: table-cell; width: 100%; height: auto; margin-bottom: 30px; float: left; text-align: center;}
  #slideshow img { width: 300px; height: auto; border: 1px solid #CCC; border-radius: 10px; }
  #slideshow img:hover { border-color: #A02B2B; cursor: pointer; }
  #thumbs { list-style-type: none; position: relative; width: 100%; margin: auto; }
  #thumbs li { float: left; margin-right: 15px; }
  #thumbs img {border: 2px solid #CCC; height: 80px; width: auto; border-radius: 5px; cursor: pointer; }
  #thumbs img:hover { border-color: #A02B2B }

  /* weitere Infos */
  #produktorder { position: relative; display: table; width: 100%; height: auto;  }
  .np3 {text-align: left; font-size: 24px; font-weight: 400; margin-bottom: 30px;}
  .np4 {text-align: left; text-decoration: line-through; font-size: larger; font-weight: 400; margin-bottom: 100px !important;}
  #produktorder form { margin-bottom: 60px; }
  #produktorder h2 { font-style: normal !important; font-size: 24px !important; text-align: left !important; }
  #produktorder h3 { font-style: normal; font-size: 18px; text-align: left; margin-bottom: 10px; }
  #produktorder h4 { font-style: normal; font-size: 14px; text-align: left; margin-bottom: 10px; }
  #produktorder p { margin-bottom: 20px; line-height: 22px; }
  #produktorder ul, #produktorder ol { margin-left: 30px; margin-bottom: 20px; }
  #produktorder ul li { margin-bottom: 5px; line-height: 22px; list-style-type: square; }
  #produktorder ol li { margin-bottom: 5px; line-height: 22px; }
  #menge { padding: 2px; }

  #warentab { position: relative; width: 700px; margin: auto; }

}

@media (max-width: 767px) {
    /* Bei Showkategorie mobile Ansicht von Sortieren und Ansicht verstecken */
  #ansicht { position: relative; width: 100%; margin-bottom: 30px; }
  .asort span { float: left; margin-right: 10px; }
  #ansicht select { width: 170px; padding: 2px 5px; color: #333; border: 1px solid #CCC; margin-top: -20px; }
  .aswitch { position: absolute; top: -15px; right: 65px; width: 95px; height: 31px; cursor: pointer; }
  .btgrid { background: url(../designpics/bt_liste-kachel_l.png) no-repeat; }
  .btlist { background: url(../designpics/bt_liste-kachel_k.png) no-repeat; }

  /* Shop */
  #produktfotos { position: relative; display: table; width: 100%; height: auto; margin-bottom: 15px; float: left; }
  #slideshow { display: table-cell; width: 100%; height: auto; margin-bottom: 30px; float: left; text-align: center;}
  #slideshow img { width: 280px; height: auto; border: 1px solid #CCC; border-radius: 10px; }
  #slideshow img:hover { border-color: #A02B2B; cursor: pointer; }
  #thumbs { list-style-type: none; position: relative; width: 100%; margin: auto; }
  #thumbs li { float: left; margin-right: 15px; }
  #thumbs img {border: 2px solid #CCC; height: 80px; width: auto; border-radius: 5px; cursor: pointer; }
  #thumbs img:hover { border-color: #A02B2B }

  /* weitere Infos */
  #produktorder { position: relative; display: table; width: 100%; height: auto;  }
  .np3 {text-align: left; font-size: 24px; font-weight: 400; margin-bottom: 30px;}
  .np4 {text-align: left; text-decoration: line-through; font-size: larger; font-weight: 400; margin-bottom: 100px !important;}
  #produktorder form { margin-bottom: 60px; }
  #produktorder h2 { font-style: normal !important; font-size: 24px !important; text-align: left !important; }
  #produktorder h3 { font-style: normal; font-size: 18px; text-align: left; margin-bottom: 10px; }
  #produktorder h4 { font-style: normal; font-size: 14px; text-align: left; margin-bottom: 10px; }
  #produktorder p { margin-bottom: 20px; line-height: 22px; }
  #produktorder ul, #produktorder ol { margin-left: 30px; margin-bottom: 20px; }
  #produktorder ul li { margin-bottom: 5px; line-height: 22px; list-style-type: square; }
  #produktorder ol li { margin-bottom: 5px; line-height: 22px; }
  #menge { padding: 2px; }

  #warentab { position: relative; width: 100%; margin: auto; }
  .eingabeartikel { width: 150px; }
  .sendbutton { width: 300px; }

  #content { padding-bottom: 220px !important; }

}

@media (max-width: 480px) {
  #ansicht { padding-top: 40px; }
  .aswitch { position: absolute; top: 0px; right: 20px; width: 95px; height: 31px; cursor: pointer; }
  #slideshow img { width: 280px; height: auto; border: 1px solid #CCC; border-radius: 10px; }
  #menge { float: left; width: 250px; }
  .shopbutton { margin-top: 15px; }
}