/* Gesamt Seite */
/* Montserrat Familie hier runtergaladen */
@font-face{
  font-family: montserrat;
  src: url('../webfonts/Montserrat-Regular.ttf');
}

:root{

  /* Color Variables */
    --color-white:#ffffff;
    --color-orange:#F39200;
    --color-gruen: #395848;
    --color-gruen2: #64c25c;
    --color-grau: #EBEBEB;
    --color-grau2: #BCBCBC;
    /* Background pop-up color */
    --color-grau3: #F8F7F3;
    --color-grau4: #707070;
    --color-schulte-rot:#E30613;
    --color-main:var(--color-orange);

    
    /* 6px */
    --font-xs:normal normal normal 0.375rem/0.5rem montserrat;
    /* 8px */
    --font-s:normal normal normal 0.5rem/0.75rem montserrat;
    /* 10px */
    --font-s1:normal normal normal 0.625rem/0.75rem montserrat;
    /* 12px */
    --font-m:normal normal normal 0.75rem/0.875rem montserrat;
    /* 14px*/
    --font-m1:normal normal normal 0.875rem/1rem montserrat;
    /* 16px */
    --font-l:normal normal normal 1rem/1.25rem montserrat;
    /* 20px */
    --font-xl:normal normal normal 1.25rem/1.5rem montserrat;
    /* 40px */
    --font-2xl:normal normal normal 2.5rem/3.75rem montserrat;

}

/* GENERAL CSS CAN BE WRITTEN HERE */
html, body, *{
  margin:0;
  padding:0;
}

#wrapper{
    max-width:1200px;
    margin:0 auto;
    width: 100%;
    height: 100%;
    position: relative;
}
#form{
  margin:1rem;
}
.page{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}
#page10{
  margin-bottom: 2rem;
}
.hide{
  display: none;
}
.noliststyle{
    list-style-type: none;
    margin: 1.25rem 0 0 1.25rem;
}

.hyphen:before{
    content: '\2010';
    position: absolute;
    margin-left: -20px;
}

.textmarginleft{
   margin-left: 1rem;
}
.underline{
    display:flex;
    text-decoration:underline;
    color:var(--color-gruen);
    font: var(--font-m);
    font-weight: 300;
}
p{
    margin-bottom:0 !important;
}
input[type="number"]::placeholder{
    text-align:center;
}

.customh1 {
    text-align: center;
    font: var(--font-l);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0px;
    color: var(--color-gruen);
    opacity: 1;
    width: 60%;
    margin: 0 auto;
}
.header-main{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  >.progressbar-container > .titel-progressbar > .abpreis{
    font: var(--font-xl);
    font-weight: bold;
    color: var(--color-gruen);
  } 
}
.buttoncontainer{
  display:flex;
  gap:1rem;
}
.buttoncontainer>.arrow{
  display:flex;
  border: 2px solid var(--color-gruen);
}
.orange{
  font: var(--font-l);
  font-weight: bold;
  color: var(--color-gruen);
}
.gruen{
  color:var(--color-gruen);
}
h3.orange{
  text-transform: uppercase;
  margin-bottom: 0;
}
h2.orange{
  text-transform: capitalize;
  margin-bottom: 0;
}

.listitemfont{
    font: var(--font-m);
    font-weight: 300;
    letter-spacing: 0px;
    color: var(--color-gruen);
    opacity: 1;
    margin: 0.25rem 0;
}
p.listitemfont{
  text-align: justify;
}
.next, .back, .check, .plus, .send, .schliessen, .arrow, .jump{
  cursor:pointer;
}
.titel-progressbar{
  display: flex;
  justify-content: space-between;
}

.abpreis, .abpreiscontainer{
  &:before{
    content:"ab ";
  }
  &.fr{
    width: max-content;
    &::before{
      content:"à partir de ";
    }
  }
}
span.abpreis:before{
  content:"";
}
.abpreis:after, .abpreiscontainer:after{
  content:" \20AC";
}
.aufpreiscontainer, .aufpreis{
  &.de:after{
    content:" \20AC";
  }
  &.fr:after{
    content:" \20AC  avec supplément";
  }
}
span.abpreis:after{
  content:" \20AC*";
}
.aufpreis:before, .aufpreiscontainer:before{
  content:"+ ";
}
.ohne-aufpreis{
  &::before, &::after{
    display: none;
  }
}
.grecaptcha-badge {
  display: none !important;
}

/* SPINNER Styling */
.spinner-container{
  width: 100%;
  height: 100%;
  background: var(--color-grau3);
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main);
  -webkit-mask: radial-gradient(circle closest-side at 50% 40%,#0000 94%, #000);
  transform-origin: 50% 40%;
  animation: s 1s infinite linear;
}
/* END of SPINNER Styling */

@keyframes s {
  100% {transform: rotate(1turn)}
}

/*Kontakt Card Styling*/

.contact-card{
  position: absolute;
  background: #F4F4F4 0% 0% no-repeat padding-box;
  border-radius: 23px;
  padding: 1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  right: -10rem;
  top: 15rem;
  transform: translateY(-50%);
  width: 10rem;
  color: var(--color-gruen);
  z-index: -1;
}
.picture{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  & > img{
    width: 10rem;
    border-radius: 50%;
  }
}
.text-content{
  display: flex;
  flex-direction: column;
  gap: .8rem;
  & > h3{
    font: var(--font-m1);
    text-transform: none;
  }
  & >p {
    font: var(--font-m);

  }
}
.contact-data{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  & > a {
    color: var(--color-gruen);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/*END of Kontakt Card Styling*/

/*Container*/
/*####################################################################################################################*/
/*Step1*/
.main-left{
    min-width: 25%;
}
.main-right{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2rem 1rem;
    width:100%;
}
.main-right-center{
  margin: 0 auto;
}
#page1>main>.main-right{
  justify-content: space-around;
}
#page6 > main > .main-right , #page7 > main > .main-right{
  flex-wrap: nowrap;
  justify-content: space-between;
}
.main-left>ol>li{
  font: var(--font-l);
  color: var(--color-grau2);
  margin: 0.5rem 1rem;
}
.pale-color-lettering{
  color: var(--color-grau);
}

.card-0{
    padding:1rem;
    position: relative;
    background-color: #F8F7F3 !important;
    border:none;
    transition: 0.5s;
    &:hover{
      background-color: #FFE0B2 !important;
      transform: translateY(-.5rem);
    }
}
.card-1, .card-3, .card-4, .card-5{
  width: 18rem;
}
.card-1{
  padding:0;
}
.card-4{
  padding: 1.5rem 1.5rem 0 1.5rem;
  gap: 0.5rem;
}
div[name='einbausituation']{
  aspect-ratio: 1;
}
.card-einbau{
  & > .image{
        width: 50%;
        height: 50%;
        margin: 0 auto;
    }
}


.text{
  margin: 1.5rem auto 0 2rem;
}
/*Slider Styling*/

.card-1>.arrow{
  position: absolute;
  top:40%;
}
.card-1>.swiper-btn-prev{
  left: 0;
}

.card-1>.swiper-btn-next{
  right: 0;
}

.carousel{
  height: 100%;
  overflow:hidden;
  position:relative;
}
.slide{
    height: 100%;
    display: flex;
    transition:all .003s;
    position: relative;
}
.slide section{
  flex-basis:100%;
}

.img-einbau{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/*End of Slider styling*/
/*####################################################################################################################*/
/*Step2*/

.card-2{
  padding: 1.5rem;
}
.progressbar-container{
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.image2{
    aspect-ratio:1/1;
    position: relative;
}

.pricebox{
    position:absolute;
    bottom: 0;
    left: 0;
    width:fit-content;
    height: 2rem;
    padding: 0 5px;
    background-color:var(--color-main);
    color: #fff;
    display:flex;
    align-items: center;
    justify-content: center;
}
.pricebox>p{
    font: var(--font-m);
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
}
#hinweis-dach{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  text-align: justify;
}
/*####################################################################################################################*/
/*Step3*/
#page3{
  position: relative;
}
#page3>main>.main-right{
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    >.orange{
      margin-bottom: 1rem;
    }
}

.durchgang{
    display:flex;
    justify-content:space-between;
    gap: 1rem;
}
.image3,.masseinput{
    width: 47.5%;
}
.masseinput{
    display:flex;
    flex-direction: column;
    justify-content:space-evenly;
}
.breite,.hoehe{
    display: flex;
    border: 2px solid var(--color-gruen);
    width: 60%;
    height: 2.4rem;
    align-items:center;
}
#breite_input,#hoehe_input{
    width:50%;
    height: 50%;
    padding: 1rem 0;
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: hidden;
    font: var(--font-m);
    background-color: #F8F7F3;
}
#breite_input::placeholder,#hoehe_input::placeholder{
  color: #AEAEAE;
}
#leftrightarrow,#updownarrow,.mm{
    width:25%;
    text-align:center;
    margin:0;
    font: var(--font-m);
    color: var(--color-gruen);
}
.masse-hinweis{
  opacity: 0;
  z-index:-1;
  position: absolute;
  transition: 2s;
}
.ohnemasse{
  display: flex;
  justify-content: center;
  align-items: center;
}

#page3 input[type="checkbox"]{
  opacity: 0;
}

#leftrightarrow{
    color:#EF1700;
    font-size:1.5rem;
}
#updownarrow{
    color:#7BB496;
    font-size:1.5rem;
}
.info-hinweis{
    width:100%;
    display: flex;
    gap: 0.5rem;
    color: var(--color-gruen);
    &> p{
      font: var(--font-l);
    }
}
.greycontainer{
  justify-content: space-between;
  align-items:center;
  height: 86px;
  border-radius: 5px;
  &.justify-content-space{
    justify-content: space-around;
  }
}

.icons{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-question{
  width:17px;
  height:17px;
}
.icon-person{
  width:27px;
  height:27px;
}
/*Buttons*/
.buttons{
    display:flex;
    width: 100%;
    gap: 1.5rem;
    justify-content: space-between;
    position: relative;
    &.buttons-directions-column{
      flex-direction: column;
    }
    &.buttons-justify-center{
      justify-content: center;
    }
    &.buttons-justify-end{
      justify-content: flex-end;
    }
}
.btn{
    font-size:14px;
    border-radius: 0;
    transition: all 0.3s ease;
}
.btn:hover{
  transform: scale(1.01);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn1{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    height: 2.25rem;
}
.btn2{
    width: 11.5rem;
    height: 3rem;
    background-color:var(--color-gruen);
    color: #fff;
}
.btn3{
  width: 11.5rem;
  height: 3rem;
  background-color:var(--color-grau4);
  color: #fff;
}
button.next, button.send{
    background-color:var(--color-gruen);
    color: #fff;
    border:none;
}
button.back{
    background-color:#fff;
    color: var(--color-gruen);
    border: 1px solid var(--color-gruen);
}
/*END of Buttons*/

/* popover of Massangaben*/
#toggle, hover, #toggle-profiloberflaeche{
  visibility: hidden;
  opacity: 0;
  position: relative;
  z-index: -1;
}

#toggle:checked ~ dialog {
  display: flex;
  opacity: 1;
}

dialog{
  display:none;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: var(--color-grau3);
  border:none;
  z-index: 99;
}
.center-popup{
  position: relative;
  padding: 2rem 6rem;
  background: white;
  height: fit-content;
  top: 35%;
  margin: 0 10rem;
/*  left: 50%;*/
/*  transform: translate(-50%, -50%);*/
  color:var(--color-gruen);
  & >p{
    font: var(--font-l);
    & > .orange{
      color: var(--color-main);
    }
    & > a {
      color: var(--color-gruen);
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }
}
.masse-info{
  cursor: pointer;
}
.close-popup{
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  color:red;
  cursor:pointer;
}
/*END of popover*/
/*####################################################################################################################*/
/*Step4*/
.info{
    opacity: 0;
    position: absolute;
    top:100%;
    transition: all 0.8s ease;
}
.card-3{
    height: 18rem;
    position: relative;
    gap: 2rem;
    & > .image{
        height: 50%;
    }
    &:hover .info{
      opacity:1;
      top:60%;
    }
    &:hover .text3{
      display:none;
    }
    --advise: 0;
    > .text3{
        &:before{
          content: "Empfehlung für ihren Maß";
          width: fit-content;
          padding: 4px;
          margin-bottom: 0.5rem;
          background-color: var(--color-main);
          color: #fff;
          display: flex;
          opacity: var(--advise);
          align-items: center;
          justify-content: center;
        }
        &.fr:before{
          content: "Article recommandé";
          background-color: var(--color-main);
        }
    }
}


.selectdoorcontainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  width:100%;
}
.doors{
    width: 100px;
    display:flex;
    justify-content:flex-start;
    margin-left:1rem;
}
.dooritem{
    height:46px;
    width:21px;
    margin-left:1px;
    border: 2px solid var(--color-gruen);
}
/*####################################################################################################################*/
/*Step5*/

.default-dekor{
  display: flex;
  gap: 5rem;
  align-items: center;
  justify-content: space-between;
/*  background-size: cover;*/
  background-size: 100% 100%;
}

.default-glas-holz{
  position: relative;
  padding: 0 2rem;
}

.abpreiscontainer, .aufpreiscontainer{
    color: white;
    background: var(--color-main);
    text-align: center;
    position: absolute;
    top: -3rem;
    font: var(--font-m1);
    padding: 5px;
}
.dekorcontainer{
  width: 100%;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  padding: 0 3rem 4rem;
  box-shadow: 0px 3px 6px #00000029;
  position: relative;
}
.choosecolorcontainer{
  display:flex;
  justify-content:center;
  height:190px;
}

.door{
  display:flex;
  justify-content:center;
  align-items:center;
  width:110px;
  border:1px solid black;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.door > .choosecolor {
  display:flex;
  justify-content:center;
  align-items:center;
}
.choosecolor:hover{
  cursor:pointer;
}
/* ripple efect here */
.bi-plus-circle-fill{
  display:flex;
  color:var(--color-main);
  /* border-radius: 50%; */
  /* animation: ripple 1.5s linear infinite; */
}
/* @keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 0px var(--color-main);
  }
  100% {
    box-shadow: 0px 0px 0px 10px var(--color-main);
  }
} */
/* end of ripple efect */
.bi-check-circle-fill{
  display:none;
  color:var(--color-gruen);
}
.choose{
  width:24px;
  height:24px;
  position: relative;
}
.cursor-icon{
  position: absolute;
  top: 12px;
  left: 12px;
  animation: ripple-cursor 1s linear infinite;
}
@keyframes ripple-cursor {
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
}

.checkDoorDecorNote{
  height:fit-content;
  /* opacity:0; */
  /* transition:all .3s; */
}
.ripple-warnung{
  animation: ripple-warnung 1s linear infinite;
} 
@keyframes ripple-warnung {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}
/*fieldset styling*/

.ver-lines{
  display: flex;
  justify-content: center;
}

.hoehe-mass{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--color-gruen);
    width:2rem;
}

.hoehe-mass>span{
    transform: rotate(-90deg);
    background: white;
    z-index: 1;
    padding: 0 5px;
    font-size: 10px;
    color: var(--color-gruen);
}
.hoehe-mass>span:after{
    content: " mm";
}

.hoehe-mass:before{
    display: block;
    content: "";
    width: 1px;
    height: 80px;
    border: 1px solid var(--color-gruen);
    position: absolute;
    top: 1rem;
}
.hoehe-mass:after{
    display: block;
    content: "";
    width: 1px;
    height: 80px;
    border: 1px solid var(--color-gruen);
    position: absolute;
    bottom: 0;
}

.hor-lines{
    left: 16px;
    margin: 0px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hor-lines:before{
    display: block;
    content: "";
    width: 500px;
    height: 2px;
    border: 1px solid var(--color-gruen);
    position: absolute;
    left:0;
    }
.hor-lines:after{
    display: block;
    content: "";
    width: 500px;
    height: 2px;
    border: 1px solid var(--color-gruen);
    position: absolute;
    right:0;
    }
.hor-lines>span{
    background: white;
    z-index: 1;
    padding: 5px;
    font-size: 10px;
    color: var(--color-gruen);
}

.hor-lines>span:after{
    content: " mm";
}
/*End of fieldset styling*/


/*####################################################################################################################*/
/*styling dekor page*/
/*Step Select one Decor*/
.other-dekor{
    display: flex;
    gap: 0.6rem;
    position:relative;
    padding: 0 2rem;
    height: 8rem;
    background-size: 100% 100%;
}
.schliessen{
  position: absolute;
  right: 3rem;
  top: 1rem;
  background: #F4F4F4 0% 0% no-repeat padding-box;
  border-radius: 5px;
  font: var(--font-m);
  font-weight: 300;
  letter-spacing: 0px;
  color: var(--color-main);
  text-transform: uppercase;
  border: 0px;
}
.colorcontainer>.greycontainer{
  justify-content: space-around;
}
.choosedekor{
  cursor:pointer
}
.color-circle{
  position:relative;
  display: inline-block;
}
.img-circle{
  width: 90px;
  height: 90px;
  overflow: hidden;
}
.iconcontainer{
  display:none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
}

.color-name{
  font: var(--font-m);
  letter-spacing: 0px;
  color: var(--color-gruen);
  width: 80%;
}

.color-preis{
  display:none;
  text-align: left;
  gap:2px;
  color: var(--color-gruen);
  font: var(--font-s);
}
.color-preis::before{
  content:"+";
}
.color-preis::after{
  content:" \20AC";
}
.buttons-dekore{
    display: flex;
    gap: 1rem;
    position: absolute;
    left: 30%;
    bottom: 13.5rem;
    & > button{
        align-items: center;
        border: 0;
        border-radius: 100px;
        color: var(--color-main);
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        line-height: 20px;
        min-height: 40px;
        min-width: 0px;
        overflow: hidden;
        padding: 0px;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        /*
        touch-action: manipulation;
        vertical-align: middle;*/
    }
    & > button.active{
      background-color: var(--color-main);
      color: #ffffff;
      border:0;
    }
    /*
    & > button[value=glas]{
      background-color: orange;
    }
    & > button[value=holz]{
      color: orange;
    }*/
}
/*
button[value=holz]{
    position: absolute;
    left: 25%;
    top: -2.5rem;
}
button[value=glas]{
    position: absolute;
    left: 30%;
    top: -2.5rem;
}*/
#dekorpagepopup{
  display: none;
  opacity: .85;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.popup-checkbox{
  display: flex;
  gap: 1rem;
}
/*Styling for checkbox*/
.checkbox-wrapper {
  --size: 1.6rem;
  --border-size: 2px;
  position: relative;
}

.checkbox-wrapper input[type="checkbox"] {
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
}

.checkbox-wrapper input[type="checkbox"],
.checkbox-wrapper label::before {
  width: var(--size);
  height: var(--size);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor:pointer;
}

.checkbox-wrapper label {
  display: inline-block;
  position: relative;
  padding: 0 0 0 calc(var(--size) + 7px);
  margin-bottom: 0;
  font: var(--font-m);
  font-weight: 300;
  color: var(--color-gruen);
  text-transform: uppercase;
}

.checkbox-wrapper label::before {
  content: '';
  border: var(--border-size) solid var(--color-gruen);
  opacity: 0.7;
  transition: opacity 0.3s;
}

.checkbox-wrapper input[type="checkbox"]:checked + label::before {
  opacity: 1;
}

.checkbox-wrapper svg {
  position: absolute;
  top: calc(50% + var(--border-size));
  left: var(--border-size);
  width: calc(var(--size) - (var(--border-size) * 2));
  height: calc(var(--size) - (var(--border-size) * 2));
  margin-top: calc(var(--size) / -2);
  pointer-events: none;
}

.checkbox-wrapper svg path {
  stroke-width: 0;
  fill: none;
  transition: stroke-dashoffset 0.2s ease-in 0s;
}

.checkbox-wrapper svg path + path {
  transition: stroke-dashoffset 0.2s ease-out 0.2s;
}

.checkbox-wrapper input[type="checkbox"]:checked ~ svg path {
  stroke-dashoffset: 0;
  stroke-width: calc(var(--size) / 2);
}
/*End of Styling for checkbox*/


/*################################################step dekor###################################################*/
#pagedekor{
  position:relative;
}
#pagedekor>main>.main-right{
  width: 75%;
}
.preview{
    width: 200px;
    height: 300px;
    position: relative;
    background-size: cover;
    >.griff-platzieren{
      display: none;
      position: absolute;
      top: 50%;
      left: 1%;
      width: 25px;
      height: 25px;
    }
}
.preview-dekor{
    right: 135px;
    background-size: 100% 100%;
}
.swiper-decor-prev, .swiper-decor-next{
    position: absolute;
    top: 35%;
}

.slider-decor{
    display: flex;
    gap: 0.5rem;
    height: 120%;
    overflow: hidden;
}

.swiper-decor-prev{
  left: 0;
}

.swiper-decor-next{
  right:0;
  z-index: 1;
}
/*####################################################################################################################*/
/*Step6 und step7*/
.preview-oberfl {
    width: 25rem;
    height: 30rem;
}
div[name=profiloberfl]{
  position: relative;
  > div >.aufpreis-hinweis{
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    color: var(--color-gruen);
    font: var(--font-s);
  }
}
.color-name>p{
  min-width: fit-content;
} 
/*
[active-preis="true"]{
  display:block;
}
[active-preis="false"]{
  display:none;
}*/
.preview-griff{
    &>.griff-platzieren{
      top:40%;
    }
}
.preview-oberfl{
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
}
.oberflaechecontainer{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2rem;
    width: 60%;
    & > .oberfl-hoehe{
      & > h3{
        margin-bottom: .5rem;
      }
    }
    & > .oberfl-farbe{
       opacity: 0;
       & > h3{
        margin-bottom: .5rem;
       }
        & > .default-oberflaeche{
          margin-bottom: 4rem;
        }
    }
}


.default-oberflaeche>.greycontainer, .other-oberflaeche>.greycontainer, .blendecontainer>.greycontainer,.oberflaechecontainer>.greycontainer{
  justify-content: space-around;
}
.default-oberflaeche>.greycontainer{
  position: relative;
}
.other-oberflaeche>.aufpreiscontainer{
  top: -2rem;
}
.other-oberflaeche, .blendecontainer{
  display:flex;
  gap: 2rem 1rem;
  position: relative;
}
.blendecontainer> .greycontainer{
  cursor: pointer;
  >.color-name{
    width: fit-content;
  } 
}
#page7>main>.main-right{
  >.oberflaechecontainer{
    gap:6rem;
    >.other-oberflaeche{
      flex-wrap: wrap;
      gap: 4rem 3rem;
    }
  }
}
.other-oberflaeche>.greycontainer{
  &:hover{
    transform: translateY(-.25rem);
  }
}
/* profiloberfläche page popover */
.other-oberflaeche>.greycontainer{
  max-width:min-content;
  &:hover > .color-name>label>.custom-popover{
      opacity: 1;
    }
}
div[name=profiloberfl]>.color-name{
  width: 100%;
  >label{
    position: relative;
    cursor: pointer;
    >.custom-popover{
        position: absolute;
        right: -100%;
        border-radius: 0;
        border: 1px solid #395848;
        padding: 0.5rem;
        font: var(--font-l);
        color: #395848;
        background: white;
        width: 15rem;
        opacity:0;
        transition: all .3s;
    }
  }
  >label>svg{
    color:var(--color-main);
  }
}
/* END of profiloberfläche page popover */

.disabled{
  opacity: .2;
}

/* Griffe page popover */
div[name=griff1]>.color-name{
    display: flex;
    gap: 5px;
    >label{
      display: none;
      position: relative;
      >.popover{
          border-radius: 0;
          border: 1px solid #395848;
          background: #FFFFFF 0% 0% no-repeat padding-box;
          padding: 0.5rem;
          font: var(--font-m);
          color: #395848;
          background: white;
          width: 8rem;
          opacity:0;
          transition: all .3s;
          z-index: 3;
      }
    }
    >label>svg{
      color:var(--color-main);
    }
}
/* END of Griffe page popover */

.gerahmt-hinweis, .offen-hinweis{
    font: var(--font-l);
    letter-spacing: 0px;
    color: var(--color-gruen);
}
/*####################################################################################################################*/
/*Step8*/

/*####################################################################################################################*/
/*Step9*/
.card-5{
  gap: 2rem;
  & > .image{
      width: 50%;
      height: 50%;
      margin: 0 auto;
  }
}
.softclosecontainer{
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    align-items: center;
}

.softclosecontainer>.imagecontainer{
  max-width: fit-content;
}

.checkboxcontainer{
    display: flex;
    gap: 1rem;
}
.checkbox-wrapper>.color-preis{
  margin-top: 5px;
}

/*####################################################################################################################*/
/*Step10*/
/*
.imagecontainer, .overviewcontainer{
  width:calc(50% - 2rem);
}
.imagecontainer{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100px;
  grid-auto-columns: 100%;
  gap: 1rem;
  & > img{
    object-fit: contain;
    object-position: center;
  }
}*/

.flagcontainer{
    display:none;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    width:100%;
}

.flagcontainer>p{
  font: var(--font-xs);
  font-weight: bold;
  letter-spacing: 0px;
  color: var(--color-gruen);
  text-transform: uppercase;
}

.overviewcontainer > ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

ul#overviewlist>li{
  display: flex;
  justify-content: space-between;
  max-height: 6rem;
  align-items: end;
  padding: 0.5rem 0;
  border-bottom: 2px solid;
  border-color: var(--color-gruen);
  & >img{
    position: relative;
    left: 10rem;
  }
}

.overview-left{
  font: var(--font-l);
  font-weight: bold;
  letter-spacing: 0px;
  color: var(--color-gruen);
  text-transform: uppercase;
  width: 33%;
}

.overview-left:after{
  content: " :";
}

.overview-right{
  display: flex;
  gap: 1rem;
  color: var(--color-gruen);
  font: var(--font-l);
  width: 33%;
  justify-content: flex-end;
}

.overviewcontainer{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.overviewcontainer> h2{
  display:none;
  font: var(--font-m);
  font-weight: 300;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.savecontainer{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: inherit;
}

.pricecontainer{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.price{
  font:var(--font-xl);
  &>.vsl-preis{
    font-weight: bold;
    color:var(--color-gruen);
  }
  &>.abpreis{
    font-weight: bold;
    color: var(--color-main);
    border-bottom: 2px var(--color-main) solid;
  }  
}

.price-notice{
  font: var(--font-m);
  font-weight: bold;
  color: var(--color-gruen);
}
.anfrage{
  background: var(--color-main);
  border: none;
  color: #FFFFFF;
}
/* styling for germany flag*/
.flag{
  width: 27px;
  height: 20px;
}
.flag-black{
  height:7px;
  background: #000000 0% 0% no-repeat padding-box;
}
.flag-red{
  height:6px;
  background: #E91818 0% 0% no-repeat padding-box;
}
.flag-gold{
  height:7px;
  background: #DEA959 0% 0% no-repeat padding-box;
}
/* end of styling for germany flag*/

.contactcontainer{
  display:flex;
  flex-direction:column;
  gap: 1.5rem;
}
.notice{
  font: var(--font-m);
  font-weight: 300;
  color: var(--color-gruen);
}
 .contact-input-field>div{
  margin: 1rem 0 ;
 }
.savecontainer>input, .contact-input-field>div>input,textarea{
  width:100%;
  height: 3rem;
  padding: 8px;
  font: var(--font-m);
  font-weight: 300;
  color: var(--color-gruen);
  border: 2px solid var(--color-gruen);
}
textarea{
  width:100%;
}
.uploadcontainer{
  width:100%;
}
input[type="file"]{
  display:none;
}
label[for=upload]{
  color: var(--color-main);
  border-bottom: 2px solid var(--color-main);
  font: var(--font-l);
  font-weight: bold;
  cursor:pointer;
}
#einverstaendnis{
  position: absolute;
  margin-right: 5px;
  width: 12px;
  height: 12px;
  opacity: 1;
}
p.protection{
  text-indent: 1rem;
  text-align: justify;
}
.safaricontainer{
    display: flex;
    gap: .5rem;
    height: 3rem;
    & > svg{
      top: 2px;
      color: red;
      max-height:100%;
    }
    & > .safaricontainerhinweis{
      font: var(--font-m);
      color: var(--color-gruen);
      margin: auto 0;
      padding: 0 50% 0 2%;
      text-align: justify;
      & > a {
        color: var(--color-main);
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }
}
.pop-up{
  display: none;
  justify-content: center;
  width:100%;
  height:100%;
  position: absolute;
  background: var(--color-grau3);
}
#content{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content;
  background:white;
  border-radius: 10px;
  padding: 2rem 4rem;
  font: var(--font-l);
  >.content-text{
    color: var(--color-gruen);
  }
  > .buttons{
    justify-content: space-around;
  }
}

/* last page pop-up button styling */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  height: 3rem;
  width: 11.5rem;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  &:hover{
    color: var(--color-white);
    transform: translateY(-2px);
  }
}

.button-ja{
    border: 2px solid var(--color-main);
    color: var(--color-main);
    &.fr{
      &:hover{
        background-color:var(--color-main);
        box-shadow: var(--color-main) 0 4px 8px;
      }
    }
    &.de{
      &:hover{
        background-color:var(--color-main);
        box-shadow: var(--color-main) 0 4px 8px;
      }
    }   
}

.button-nein {
  border: 2px solid var(--color-gruen);
  color: var(--color-gruen);
  &:hover{
    background-color:var(--color-gruen);
    box-shadow: rgba(57, 88, 72, 1) 0 4px 8px;
  }
}
/* END of last page pop-up button styling */

/*####################################################################################################################*/
/*Step11*/

#page11, #page13{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 60%;
  margin: 0 auto;
  position: relative;
}

#page11 > p{
  text-align:center;
}

.title{
  text-transform: uppercase;
  font: var(--font-2xl);
  font-weight: bold;
  color: var(--color-gruen);
  &.title-width-100{
    width: 100%;
  }
}
#page11>.notice{
  font: var(--font-l);
  font-weight: 300;
}
.notice>span{
  font-weight:bold;
}

/* rate 5 star styling*/

.rate {
    float: left;
    height: 60px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:52px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: var(--color-main);
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

/* End of rate 5 star styling*/
.opinioncontainer{
  width: 500px;
  height: 150px;
}
.opinioncontainer>textarea{
    padding: 10px;
    border: 2px solid var(--color-gruen);
    border-radius: 5px;
    height:100%;
}
/*####################################################################################################################*/
/*Step11*/

.card-gutschein {
  width: 60%;
  padding: 10px;
  border-radius: 20px;
  background: var(--color-main);
  border: none;
  color: #fff;
  height: 350px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
}

.card-gutschein h1 {
  font-size: 48px;
  margin-bottom: 0px;
}

.card-gutschein span {
  font-size: 28px;
}
.card-gutschein-hinweis{
  font: var(--font-l);
  letter-spacing: 0px;
}

/* FOOTER */
.footer-main {
  height: 8rem;
  background-color: var(--color-grau4);
  display: flex;
  justify-content: center;
  align-self: center;
}
.footer-content{
  display: flex;
  justify-content: center;
  align-self: center;
}
.footer-content ul{
  display: flex;
  gap: 3rem;
}
.footer-content ul, .footer-content ul li{
  margin: 0;
  padding: 0;
}
.footer-content ul li a{
  color: var(--color-white);
  transition: color 0.4s;
}
.footer-content ul li a:hover{
  color: var(--color-orange);
}
/*####################################################################################################################*/
/*agb, datenschutz, impressum styling hier*/
.section>#wrapper>ol,
.section>#wrapper>ul{
  padding-inline-start: 2rem;
}

.section>#wrapper>h2{
  margin-top: 1rem;
}
.section>#wrapper>p>a,
.section>#wrapper>ul>li>a{
  color: var(--color-orange);
}



/*END OF CUSTOMER STYLING#############################################################################################*/