/*MEDIA QUERY*/
/*####################################################################################################################*/

@media only screen and (min-width: 769px) {
  /* For Desktop: */
  .desktop {
    display:none !important;
  }
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
/*###############################          ALLGEMEIN STYLING HIER         ############################################*/
  /* For mobile: */
  .mobile {
    display:none !important;
  }
  /* Hier it can be written, if only display:none property changed*/
  .main-left, .buttoncontainer, .ohnemasse, .card-3, .big-img-container, .savecontainer, 
    .abpreiscontainer, .aufpreiscontainer, .preview-dekor, .contact-card{
      display:none;
  }
  /* Hier it can be written, if only display:flex, block or inline-block property changed*/
  .overviewcontainer>h2, .iconcontainer{
    display:block;
  }
  .color-preis, .flagcontainer{
    display:flex;
  }
  .main-right{
    flex-direction: column;
  }
  .customh1{
    font: var(--font-s1);
    font-weight: bold;
    text-transform: none;
    width: 100%;
  }
  .progressbar{
    gap: 0.4rem;
  }
  .orange{
    font: var(--font-s1);
    font-weight: bold;
    color: var(--color-main);
  }
  .header-main{
    >.progressbar-container > .titel-progressbar > .abpreis{
      font: var(--font-m);
      font-weight: bold;
      color: var(--color-main);
    } 
  }
  .listitemfont{
      font: var(--font-s1);
  }
  .greycontainer{
    display:flex;
    background-color:#F4F4F4;
    min-width: 18rem;
  }
  .img-circle{
    border-radius: 50%;
    width:50px;
    height:50px;
  }
  div[name=profiloberfl]>.color-name{
    width: auto;
  }
  .color-name{
    font: var(--font-s1);
    font-weight: bold;
    color: var(--color-main);
    text-transform: uppercase;
    width: 40%;
  }
  button{
    width: 150px;
    height: 40px;
    font: var(--font-s1);
    font-weight: bold;
  }
  .btn1{
    width: 7.5rem;
  }
  .btn2, .btn3{
    width: 7.5rem;
    height: 2rem;
  }

  .cookie-container{
    width: 90%;
    font: var(--font-s1);
    & > * {
      padding: .5rem;
  }
  }
/*###############################          STEP1 STYLING HIER             ############################################*/
  .card-1{
    background-color: #F4F4F4;
    margin:0 auto;
  }
/*###############################          STEP2 STYLING HIER             ############################################*/

  .card-2{
    margin:0 auto;
  }
/*###############################          STEP3 STYLING HIER             ############################################*/

  .center-popup{
    padding: 1rem 2rem;
    margin: 0 3rem;
    & >p{
      font: var(--font-m);
    }
  }
  .close-popup{
    padding: 0.5rem;
  }
  .breite, .hoehe {
      width: 100%;
      & > #breite_input, #hoehe_input{
        font: var(--font-s);
      }
  }

  .cookie-container{
    top: 15%;
  }


/*###############################          STEP4 STYLING HIER             ############################################*/

  .selectdoorcontainer{
    flex-direction: column;
  }

/*###############################         STEPDEKOR STYLING HIER          ############################################*/

  .dekorcontainer{
    padding: 0;
    box-shadow: none;
  }
  .other-dekor{
    flex-direction: column;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    width: 100%;
/*    background-size: cover;
    background-repeat: round;*/
  }
  #pagedekor>main>.main-right{
    width: 100%;
  }
  .slider-decor{
    flex-direction: column;
    > .greycontainer{
      justify-content: space-around;
    }
  }
  .buttons-dekore{
    left: 50%;
    top: 0;
    bottom:0;
    transform: translateX(-50%);
  }
  .default-glas-holz{
    padding:0;
    width: 100%;
    position: initial;
    >.greycontainer{
      justify-content: space-around;
    }
  }
  .colorcontainer{
    position: relative;
  }
/*###############################         STEP6 STYLING HIER              ############################################*/

  .other-oberflaeche, .blendecontainer{
    flex-direction: column;
    gap:1rem;
  }
  .other-oberflaeche>.greycontainer{
    max-width: none;
    &:hover{
      transform: translateY(0);
    }
  }

  .oberflaechecontainer{
    width: inherit;
    flex-direction: column;
    gap: 1rem;
      & > .oberfl-hoehe > h3{
        margin-bottom:1rem;
      }
      & > .oberfl-farbe{
        &  > h3{
          margin-bottom:1rem;
        }
        &  > .default-oberflaeche{
          margin-bottom:1rem;
        }
      }
  }

/*###############################         STEP7 STYLING HIER             ############################################*/

  #page7>main>.main-right>.oberflaechecontainer>.other-oberflaeche{
    gap:1rem;
  }
  .preview-griff{
    margin: 0 auto;
  }
  .preview-griff-hidden{
    display: none;
  }

/*###############################         STEP10 STYLING HIER             ############################################*/

  .imagecontainer, .overviewcontainer{
    width:100%;
  }
  ul#overviewlist>li{
    border-color: #F4F4F4;
  }
  .overview-left{
    font: var(--font-s);
    font-weight: bold;
  }
  .overview-right{
    font: var(--font-s);
  }
  .price{
    font: var(--font-s1);
  }
  .price-notice{
    font: var(--font-s);
    font-weight: bold;
  }
  .notice{
    font: var(--font-s);
    font-weight: 300;
  }
  .buttons{
    justify-content: space-between;
    gap: .5rem;
  }
  .safaricontainer{
    height: 2rem;
    & > svg {
      width: 4rem;
    }
    & > .safaricontainerhinweis{
      font: var(--font-s);
      padding: 0;
    }
  }
  .title{
    font: var(--font-l);
    font-weight: bold;
  }
  .bi-cloud-arrow-up-fill{
    width: 1.5rem;
    height: 1rem;
  }
  label[for=upload] {
    border-bottom: 1px solid #F29200;
    font: var(--font-m);
    font-weight: bold;
  }
  .bi-pencil-fill{
    width:12px;
    height:12px;
  }
  .button{
    width: 7.5rem;
    height: 2rem;
  }
  ul#overviewlist>li{
  & >img{
    left: 0;
  }
}

/*###############################     STEP11(BEWERTEN Seite) STYLING HIER     ########################################*/

  #page11>.notice{
    font: var(--font-s);
    font-weight: 300;
  }
  /* rate 5 star resposive*/
  .rate{
    height:35px;
  }
  .rate:not(:checked) > label{
    font-size:32px;
  }
  /* End of rate 5 star resposive*/

  .opinioncontainer{
    width:250px;
    height:80px;
  }
/*###############################     Cookie STYLING HIER     ########################################*/
  .cokie-section h2{
    font-size: 12px;
  }
  
  .cokie-section h3{
    font-size: 10px;
  }
  .cokie-section p{
    font: var(--font-m);
  }
  .footer-content ul {
    flex-direction: column;
    gap: 0;
}
}

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  .main-right{
    gap:1rem;
  }
  .card-1, .card-3, .card-4, .card-5{
    width:18rem;
  }
  .main-left{
    min-width: min-content;
}
}

/*###############################       END OF RESPONSIVE STYLING         ############################################*/