@charset 'iso-8859-15';

/* dbh colors
dbh grey (default)      #424242 #707070 #9e9e9e #cccccc #fafafa
ocean    (help)         #00705a #338c7b #66a99c #99c5bd #cce2de
green    (success)      #5f7000 #7f8c33 #9fa966 #bfc599 #dfe2cc
yellow   (warning)      #be8500 #cb9d33 #d8b666 #e5ce99 #f2e6cc
dbh red  (error)        #9e040d #e30613 #e3444f #e38188 #e3bfc1
grey     (background)   #868e90 #9ea5a6 #b6bbbc #ced2d2 #e6e8e8
black    (foreground)   #333333 #5b5b5b #848484 #adadad #d6d6d6
*/

/* -------------------- text font */
@font-face {
  font-family:          'Open Sans';
  font-style:           normal;
  font-weight:          300;
  src:                  local('Open Sans Light'),
                        local('OpenSans-Light'),
                        url('fonts/OpenSans-Light.woff2') format('woff2'),
                        url('fonts/OpenSans-Light.woff') format('woff');
  unicode-range:        U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family:          'Open Sans';
  font-weight:          400;
  font-style:           normal;
  src:                  local('Open Sans'),
                        local('OpenSans-Regular'),
                        url('fonts/OpenSans-Regular.woff2') format('woff2'),
                        url('fonts/OpenSans-Regular.woff') format('woff');
  unicode-range:        U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family:          'Open Sans';
  font-style:           normal;
  font-weight:          600;
  src:                  local('Open Sans Semibold'),
                        local('OpenSans-Semibold'),
                        url('fonts/OpenSans-Semibold.woff2') format('woff2'),
                        url('fonts/OpenSans-Semibold.woff') format('woff');
  unicode-range:        U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family:          'Open Sans';
  font-style:           normal;
  font-weight:          700;
  src:                  local('Open Sans Bold'),
                        local('OpenSans-Bold'),
                        url('fonts/OpenSans-Bold.woff2') format('woff2'),
                        url('fonts/OpenSans-Bold.woff') format('woff');
  unicode-range:        U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* -------------------- header login hover dropdown */
header .preview.account .bottomLinks .actions a {
  font-size:            1.2rem;
}

/* -------------------- background image */
body.step-XL {
  background-color:     #fafafa;
}
body.step-XL > .body > .content {
  z-index:              0;
  background-color:     #ffffff;
  box-shadow:           0 0 0.4rem 0 rgba(0,0,0,0.2);
  padding-right:        0.8rem;
}
body.step-XL .customer .cockpit .tile {
  z-index:              1;
}
body.step-XL footer {
  margin-top:           0;
  box-shadow:           0 -1.6rem 1.6rem 0 rgba(255,255,255,1);
}

/* -------------------- spacer */
.spacer {
  height:               3.2rem;
}

/* -------------------- main: text items: smaller images */
.step-XL:not(.mainWidth80) main > .articleDetail.text .col.colMain .articlePicture,
.step-L:not(.mainWidth80) main > .articleDetail.text .col.colMain .articlePicture {
  width:                20%;
}
.step-M:not(.mainWidth80) main > .articleDetail.text .col.colMain .articlePicture,
.step-S:not(.mainWidth80) main > .articleDetail.text .col.colMain .articlePicture,
.step-XS:not(.mainWidth80) main > .articleDetail.text .col.colMain .articlePicture {
  width:                50%;
  display:              block;
}
.step-XL:not(.mainWidth80) main > .articleDetail.text .col.colMain .articleHtmlText,
.step-L:not(.mainWidth80) main > .articleDetail.text .col.colMain .articleHtmlText {
  width:                calc(100% - (20% + 3rem)); 
}

/* -------------------- seitenklasse xyz: main 80% breit */
body.mainWidth80.step-XL main {
  flex-grow:            0;
}
body.mainWidth80.step-XL.layout-main.layout-left main {
  width:                calc(100% - 44rem);
}

/* -------------------- gift papers */
.bpmSeOptionsGiftPaper .giftpaper.classic:before,
.basket.confirm .giftpack .giftpaper.classic:before {
  background-image:     url(images/giftPaper-classic.jpg);
}
.bpmSeOptionsGiftPaper .giftpaper.classic-red:before,
.basket.confirm .giftpack .giftpaper.classic-red:before {
  background-image:     url(images/giftPaper-classicRed.jpg);
}
.bpmSeOptionsGiftPaper .giftpaper.children-yellow:before,
.basket.confirm .giftpack .giftpaper.children-yellow:before {
  background-image:     url(images/giftPaper-childrenYellow.jpg);
}
.bpmSeOptionsGiftPaper .giftpaper.xmas:before,
.basket.confirm .giftpack .giftpaper.xmas:before {
  background-image:     url(images/giftPaper-xmas.jpg);
}
.bpmSeOptionsGiftPaper .giftpaper.xmas-children-blue:before,
.basket.confirm .giftpack .giftpaper.xmas-children-blue:before {
  background-image:     url(images/giftPaper-xmasChildrenBlue.jpg);
}

/* fix relatedStores display in employeeDetail (DBH-2774, MT) */
/* this css can be removed with 4.1.5 or + */
.articleDetail.employee .relatedStores .item .col.storeInfo .articlePhone,
.articleDetail.employee .relatedStores .item .col.storeInfo .articleEmail {
  display:              block;
}

/* fix page brorder in step XL for safari (DBH-2737) */
body.step-XL > .body > .content {
  z-index:              0;
  align-self:           center;
  margin:               0 calc(100% - 100vw) 0 0;
  padding:              2.4rem 0.8rem 0 0.8rem;
  box-shadow:           0 0 0.4rem 0 rgba(0,0,0,0.2);
  background-color:     #ffffff;
}