@charset "UTF-8";
/**
 * Configuration file for the common styles
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
/**
 * File that contains all the scss files that will be used as styles for the theme.
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
/**
 * Configuration file with the common colors used in the theme.
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
/**
 * File containing commonly used mixins.
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
/**
 * Styles for the product grid displayed on categories and search results.
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
.catalog-category-view .page-wrapper .page-main .columns .products-grid, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid {
  margin: 10px 0; }
  .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items {
    display: flex;
    flex-wrap: wrap; }
    .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item {
      margin: 0 0 10px 0; }
      .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info {
        width: 95%;
        height: 100%;
        position: relative;
        margin: auto; }
        .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details {
          margin-bottom: 50px; }
          .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .product-item-name, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .product-item-name {
            height: 40px;
            overflow: hidden; }
          .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .price-box, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .price-box {
            margin: 0; }
            .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .price-box .price-wrapper .price, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .price-box .price-wrapper .price {
              font-size: 20px; }
          .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .product-item-inner, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .product-item-inner {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            margin: auto; }
            .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .product-item-inner .actions-primary, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .product-item-inner .actions-primary {
              width: 100%; }
              .catalog-category-view .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .product-item-inner .actions-primary .action.tocart.primary, .catalogsearch-result-index .page-wrapper .page-main .columns .products-grid .product-items .product-item .product-item-info .product-item-details .product-item-inner .actions-primary .action.tocart.primary {
                width: 100%; }

/**
 * Styles for category pages. (Product grid styles does not goes here!)
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
.catalog-category-view .page-wrapper .breadcrumbs, .catalogsearch-result-index .page-wrapper .breadcrumbs {
  margin-bottom: 10px; }

.catalog-category-view .page-wrapper .page-main .page-title-wrapper h1, .catalogsearch-result-index .page-wrapper .page-main .page-title-wrapper h1 {
  margin-bottom: 10px; }

.catalog-category-view .page-wrapper .page-main .columns .block.filter, .catalogsearch-result-index .page-wrapper .page-main .columns .block.filter {
  margin-bottom: 10px; }
  .catalog-category-view .page-wrapper .page-main .columns .block.filter .filter-title, .catalogsearch-result-index .page-wrapper .page-main .columns .block.filter .filter-title {
    margin-bottom: 10px; }

.catalog-category-view .page-wrapper .page-main .toolbar-products, .catalogsearch-result-index .page-wrapper .page-main .toolbar-products {
  margin-bottom: 10px;
  padding: 0; }

.catalog-category-view .price::after, .catalogsearch-result-index .price::after {
  content: " / m²"; }

.category-name {
  margin-top: -20px;
  font-size: 18px; }

.category-amount {
  margin-bottom: 20px; }

/**
 * Styles for sub category pages. (categories which display other categories and no products)
 *
 * @package    Spanplatten default
 * @author     Simon Brauner <brauner@code4business.de>
 */
.subcategories-list {
  list-style: none; }
  .subcategories-list .subcategories-list-item {
    float: left;
    width: 300px; }
  .subcategories-list a, .subcategories-list a:visited {
    color: #4d87c7;
    text-decoration: none;
    font-weight: bold; }
  .subcategories-list a:hover {
    color: black; }
  .subcategories-list .category-image {
    width: 261px;
    height: 174px; }

/**
 * Styles for configurator product page.
 *
 * @package    Spanplatten default
 * @author     Simon Brauner <brauner@code4business.de>
 */
#plate-configurator {
  width: inherit; }
  #plate-configurator .under-image-container {
    display: flex;
    height: 50px; }
  #plate-configurator .image-size-definer {
    width: 50%;
    padding-top: 50%;
    position: relative;
    height: 0; }
  #plate-configurator .image-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  #plate-configurator .image-container {
    display: flex; }
  #plate-configurator .plate-image {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  #plate-configurator .field.qty {
    margin-bottom: 0; }
  #plate-configurator .box-tocart {
    margin: 0; }
  #plate-configurator .dimensions {
    line-height: 35px;
    display: grid; }
    #plate-configurator .dimensions span:after {
      content: '*';
      color: #a2151e;
      font-size: 1.2rem;
      margin: 0 0 0 5px; }
    #plate-configurator .dimensions div {
      display: inline-flex; }
      #plate-configurator .dimensions div .control {
        display: block; }
    #plate-configurator .dimensions .label, #plate-configurator .dimensions .control {
      margin-right: 5px; }
  #plate-configurator .control {
    margin: 5px 0; }
  #plate-configurator .product-options-bottom .fieldset {
    display: inline-flex; }
  #plate-configurator #product-addtocart-button {
    margin-top: 30px; }
  #plate-configurator .dimension-header {
    margin-top: 20px;
    padding-bottom: 6px;
    font-weight: bold; }
  #plate-configurator .dimensions-wrapper {
    margin-bottom: 10px; }
  #plate-configurator .edge-strip {
    clear: both; }
    #plate-configurator .edge-strip span {
      font-weight: bold; }
    #plate-configurator .edge-strip .edge-strip-image {
      height: 55px;
      width: 100px;
      margin: 0 auto; }
    #plate-configurator .edge-strip .raster-image {
      position: absolute;
      height: 55px;
      width: 100px;
      background: transparent url("../images/perspective.png") scroll no-repeat; }
      #plate-configurator .edge-strip .raster-image.links {
        background-position-x: 0px; }
      #plate-configurator .edge-strip .raster-image.hinten {
        background-position-x: -135px; }
      #plate-configurator .edge-strip .raster-image.rechts {
        background-position-x: -275px; }
      #plate-configurator .edge-strip .raster-image.vorne {
        background-position-x: -410px; }
  #plate-configurator .dimension-line-v-start {
    position: relative;
    background: transparent url("../images/dimension_line_v.png") scroll no-repeat;
    width: 50px;
    height: 100%;
    opacity: 0; }
    #plate-configurator .dimension-line-v-start .dimension-line-v-ende {
      border-bottom: black 1px solid;
      height: calc(100% - 1px);
      width: 35px;
      margin-left: 10px; }
  #plate-configurator .space-over-image {
    width: 50%;
    height: 50px; }
    #plate-configurator .space-over-image .dimension-line-h-start {
      background: transparent url("../images/dimension_line_h.png") scroll no-repeat;
      height: inherit;
      opacity: 0; }
    #plate-configurator .space-over-image .dimension-line-h-start:after {
      content: "";
      position: relative;
      right: 0;
      margin-left: calc(100% - 1px);
      border-right: black 1px solid;
      top: 20%;
      font-size: 26px; }
  #plate-configurator .over-image-container {
    display: flex;
    height: 50px; }
  #plate-configurator .space-h {
    width: 50px;
    height: 50px;
    float: left; }
  #plate-configurator .calculatedPrice {
    font-size: 18px;
    font-weight: bold; }
  #plate-configurator .calculatedPrice-details {
    float: left;
    margin-right: 5px; }
  #plate-configurator a {
    color: #4d87c7; }
  #plate-configurator #banding-front {
    height: 50px;
    width: 50%;
    float: left; }
    #plate-configurator #banding-front.show {
      background: transparent url("../images/mark_banding_front.png") scroll no-repeat center; }
  #plate-configurator #banding-left {
    position: relative; }
    #plate-configurator #banding-left.show {
      background: transparent url("../images/mark_banding_left.png") scroll no-repeat center; }
  #plate-configurator #banding-right {
    width: 50px;
    position: relative; }
    #plate-configurator #banding-right.show {
      background: transparent url("../images/mark_banding_right.png") scroll no-repeat center; }
  #plate-configurator #banding-rear.show {
    background: transparent url("../images/mark_banding_rear.png") scroll no-repeat center; }
  #plate-configurator #edge-strip-selector {
    margin-bottom: 10px; }
    #plate-configurator #edge-strip-selector span {
      text-decoration: underline;
      font-weight: bold;
      cursor: pointer; }

.restposten {
  color: #a2151e;
  font-weight: bold; }

@media only screen and (max-width: 1024px) {
  .space-h.left, #banding-left {
    margin-left: auto; }
  .space-h.right, #banding-right {
    margin-right: auto; } }

/**
 * Checkout styles
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
.checkout-index-index .checkout-container {
  margin: 20px 0; }
  .checkout-index-index .checkout-container .opc-progress-bar .opc-progress-bar-item._active::before, .checkout-index-index .checkout-container .opc-progress-bar .opc-progress-bar-item._active > span::before {
    background-color: #1979c3; }
  .checkout-index-index .checkout-container .opc-wrapper .checkout-shipping-address .field.addresses .shipping-address-items {
    margin-top: 10px; }
    .checkout-index-index .checkout-container .opc-wrapper .checkout-shipping-address .field.addresses .shipping-address-items .shipping-address-item {
      transition: none;
      padding: 15px; }
      .checkout-index-index .checkout-container .opc-wrapper .checkout-shipping-address .field.addresses .shipping-address-items .shipping-address-item.selected-item {
        border-color: #1979c3; }
        .checkout-index-index .checkout-container .opc-wrapper .checkout-shipping-address .field.addresses .shipping-address-items .shipping-address-item.selected-item::after {
          background-color: #1979c3; }
      .checkout-index-index .checkout-container .opc-wrapper .checkout-shipping-address .field.addresses .shipping-address-items .shipping-address-item .action-select-shipping-item {
        display: block;
        margin: 10px auto 0 auto;
        float: none; }
  .checkout-index-index .checkout-container .opc-wrapper .checkout-payment-method .payment-method .payment-method-content .checkout-agreements-block .customer-note {
    margin-bottom: 10px; }

/**
 * Styles for the customer account pages.
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
.account .page-wrapper .page-main .columns .sidebar-main .account-nav .item.current strong {
  border-color: #1979c3; }

/**
 * Styles for the customer account login page.
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
.customer-account-login .page-main .column.main .login-container .form-login .fieldset.login .label {
  text-align: left; }

.customer-account-login .page-main .column.main .login-container .form-login .fieldset.login .actions-toolbar, .customer-account-login .page-main .column.main .login-container .form-login .fieldset.login::after {
  margin-left: 0; }

/**
 * Styles for the homepage.
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
.cms-home .page-main .column.main {
  padding-bottom: 0; }

.cms-home .homepage-video {
  padding-top: 42%;
  position: relative; }
  .cms-home .homepage-video iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%; }

.cms-home .homepage-description h2 {
  font-weight: normal; }

.cms-home .homepage-banners {
  text-align: center; }
  .cms-home .homepage-banners img {
    margin-right: 5px;
    cursor: pointer; }
    @media only screen and (min-width: 391px) {
      .cms-home .homepage-banners img:last-child {
        margin-right: 0; } }

/**
 * Minicart styles
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
.minicart-wrapper .action.showcart .counter.qty {
  background-color: #1979c3; }

/**
 * Styles for very generalistic elements. Only include here styles for things that are part of the whole shop.
 * Examples are: links, list items, tables
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
a, a:visited {
  color: #676572; }

/**
 * Styles for the footer
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
.page-footer {
  background-color: #d2d2d2; }
  .page-footer .footer.content {
    margin-top: 15px;
    color: #35343b; }
    .page-footer .footer.content .footer-content {
      text-align: center; }
      .page-footer .footer.content .footer-content .contact .contact-numbers table {
        margin: auto;
        width: auto; }
        .page-footer .footer.content .footer-content .contact .contact-numbers table tr td, .page-footer .footer.content .footer-content .contact .contact-numbers table tr th {
          text-align: center;
          padding: 0; }
      .page-footer .footer.content .footer-content p {
        margin: 0; }
    .page-footer .footer.content .copyright {
      text-align: center; }

/**
 * Styles for the header
 *
 * @package    Spanplatten default
 * @author     Rafael Melo <melo@code4business.de>
 */
@media (pointer: fine) {
  .nav-sections .nav-sections-item-content .navigation .category-item.level-top {
    transition: background-color 0.2s; }
    .nav-sections .nav-sections-item-content .navigation .category-item.level-top:hover {
      background-color: #676572; } }

/**
 * File that contains all visual changes for the cookie notice on every page
 *
 * @package    Spanplatten default
 * @author     Simon Brauner <brauner@code4business.de>
 */
.message.global.cookie {
  top: 0;
  bottom: auto;
  z-index: 50;
  background-color: #222;
  color: white;
  font-size: 1em;
  font-family: Tahoma, Geneva, sans-serif;
  position: fixed; }
  .message.global.cookie .content p {
    text-align: center; }
  .message.global.cookie a {
    color: #31a8f0; }
  .message.global.cookie #btn-cookie-allow {
    background-color: #f1d600;
    width: 100%; }
  .message.global.cookie .actions {
    color: #222;
    margin-top: 10px; }

/*# sourceMappingURL=app-styles-c.css.map */