/* plissee startseite spezifische Sachen */
#cards .header {
    padding-left: 4em;
    background: url("/bilder/seo/icon_window_fashion.svg") no-repeat 1.2em 50%;
    background-size: 2.25em;
}

#wf {
    order: 1;
}

#lyselhome {
    order: 2;
}
  #lyselhome .header {
      background-image: url("/bilder/seo/icon_lysel_home.svg");
  }
  #lyselhome .header > div:last-child b {
      display: block;
      color: #fff;
      text-transform: uppercase;
      font-weight: 800;
      font-size: 1.31em;
  }
  #lyselhome .modelle li:first-child span {
      background-image: url("/bilder/seo/Icon_Herz.svg");
  }



#fertigplissee {
    order: 3;
}
  #fertigplissee .reiterGroup .reiter {
      background: var(--primary-color);
  }
  #fertigplissee .modelle li,
  #fertigplissee .plisseeDetails li {
    background: url("/bilder/seo/haken_schwarz.svg") no-repeat 100% 50%;
  }
    #fertigplissee .plisseeDetails li.befestigung span {
        background: url("/bilder/seo/befestigung-kleben.svg") no-repeat 0 50%;
    }
      #fertigplissee .plisseeDetails li.befestigung span.klemmen {
          background-image: url("/bilder/seo/befestigung-klemmen.svg");
      }
      #fertigplissee .plisseeDetails li.befestigung span.kleben {
          background-image: url("/bilder/seo/befestigung_kleben_fertig.svg");
      }
  #fertigplissee .konfigBtn div {
      justify-content: center;
  }

@media only screen and (min-width: 1261px) {
    /* #lyselhome ist Vorausgewählt, bei hover über andere bekommen diese den "Ausgewählt-Schatten" und bei #lyselhome wird er entfernt */
    #wf:hover ~ #lyselhome > a,
    #fertigplissee:hover ~ #lyselhome > a {
        text-decoration: none;
        box-shadow: 0px 2px 4px #00000042;
    }
    #cards > #lyselhome > a,
    #wf > a:hover,
    #fertigplissee > a:hover {
        box-shadow: 0px 4px 40px #00000042;
        transition: box-shadow 0.15s;
    }
}
@media only screen and (max-width: 1260px) and (min-width: 764px) {
  #lyselhome {
      order: 1;
  }
    #lyselhome .header + li > img:last-child {
        bottom: 0;
    }
  #wf {
    order: 2;
  }
    #wf .header + li > img:last-child {
        bottom: 0;
    }

  #fertigplissee .konfigBtn > div > span {
      margin: 0;
  }

}

@media only screen and (max-width: 763px) {
  #lyselhome {
      order: 1;
  }
    #lyselhome .header > div:last-child {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
      #lyselhome .header > div:last-child b {
          font-size: 1.575em;
      }
    #lyselhome .header {
          display: flex !important;
          padding-top: 0;
          padding-bottom: 0;
          background-size: 2.5em auto;
    }
    #lyselhome .modelle li span {
        padding: 1.25em 0.5em;
        display: inline-block;
        background: url("/bilder/seo/haken_schwarz.svg") no-repeat 50% 0;
        background-size: 1.5em auto;
        font-weight: 400;
        font-size: 12px;
    }
    #lyselhome .modelle li:first-child {
        display: none;
    }
    #lyselhome .header + li > img:last-child {
        bottom: 0em;
        left: 0em;
    }

  #wf {
      order: 2;
  }
    #wf .header {
        padding-top: 1.5em;
        padding-bottom: 1.5em;
    }
      #wf .header + li > img:last-child {
          bottom: 0em;
          left: 0em;
      }

  #fertigplissee {
      order: 3;
  }
    #fertigplissee .reiterGroup {
        display: none;
    }
    #fertigplissee .mobilPreis {
        display: block;
        font-size: 0.75em;
        margin: 0.5em;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
      #fertigplissee .mobilPreis .txtPreis {
          font-size: 14px;
          font-size: 1.16666666666666666666em;
      }
    #fertigplissee .header {
        padding-left: 1em;
    }

}