@font-face {
  font-family: 'LatoLight';
  font-style: normal;
  font-weight: 300;
  src: url(fonts/lato/lato-light.woff2) format('woff2');
}

/* Chrome, Safari, Edge, Opera */
#gruendachgenerator input::-webkit-outer-spin-button,
#gruendachgenerator input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#gruendachgenerator input[type=number] {
  -moz-appearance: textfield;
}

#gruendachgenerator input[type='radio'] {
    accent-color: #6d7379;
}

#gruendachgenerator .page4 input[type='radio'] {
  margin: 0;
  position: relative;
  top: -3px;
  margin-right: 4px;
}

#gruendachgenerator {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    overflow: auto;
    z-index: 9000;
    font-size: 20px;
}

#gruendachgenerator .scrolldown {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 90px;
    background: rgba(0,0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 100%); 
    pointer-events: none;
    z-index: 99;
    transition: opacity 0.3s ease;
}

#gruendachgenerator .scrolldown img {
  width: 40px;
  margin: 50px auto 0 auto;
  display: block;
  animation: moveInArrow 0.6s ease 3;
}

@keyframes moveInArrow {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

#gruendachgenerator.weiterhinweis .scrolldown {
  opacity: 1;
}

@media (max-width: 920px) {
  #gruendachgenerator {
    font-size: 1.8vw;
  }
  #gruendachgenerator h1 {
    font-size: 4.2vw;
  }
}

#gruendachgenerator table {
  margin-top: 60px;
  color: #aaa;
  font-size: 14px;
  width: 70%;
}

@media (max-width: 550px) {
  #gruendachgenerator {
    font-size: 2.8vw;
  }
  #gruendachgenerator table th {
    vertical-align: top;
  }
  #gruendachgenerator table {
    width: 100%;
  }
}

#gruendachgenerator th {
  text-transform: inherit;
}

#gruendachgenerator td {
  color: #aaa;
}

#gruendachgenerator strong {
  font-weight: 900;
}

#gruendachgenerator h1,
#gruendachgenerator h2,
#gruendachgenerator h3,
#gruendachgenerator h4,
#gruendachgenerator h5,
#gruendachgenerator h6 {
  color: #6d7379;
}

#gruendachgenerator h4.normal {
  font-weight: 400;
  margin-bottom: 0;
}

#gruendachgenerator .logo-left.medium-logo-center {
    padding-top: 3px;
}

#gruendachgenerator .breadcrumb {
  font-size: 12px;
  width: 100%;
  margin-left: 40px;
  margin-top: 12px;
}

#gruendachgenerator .breadcrumb a {
  margin-right: 10px;
  color: #6d7379;
}

#gruendachgenerator .breadcrumb a:after {
  content: ">";
  font-weight: 400;
  color: #6d7379;
  padding-left: 10px;
}

#gruendachgenerator .breadcrumb a:last-child {
  font-weight: 800;
}
#gruendachgenerator .breadcrumb a:last-child:after {
  content: "";
}

#gruendachgenerator .logo {
    margin-top: 3px;
}

#gruendachgenerator .header-top,
#gruendachgenerator .header-top a {
  color: #fff;
  font-size: 12px;
}

#gruendachgenerator .header-top a:hover {
  font-weight: 900;
}

#gruendachgenerator .header-top .extraLink {
  margin-left: auto;
  padding-right: 6px;
}

#gruendachgenerator .header-top .back {
  padding-left: 6px;
}

#gruendachgenerator .content {
  position: relative;
  padding-top: 40px;
  padding-bottom: 160px;
  padding-left: 15px;
  padding-right: 15px;
}

#gruendachgenerator .smalllink,
#gruendachgenerator .smalllink a {
  font-size: 12px;
  color: #bebfc0;
  font-weight: 400;
  padding: 10px 0;
}

#gruendachgenerator .smalllink {
  display: block;
  text-align: center;
}

#gruendachgenerator .weiter,
#gruendachgenerator .zurueck {
  color: #ff6600;
  font-size: 31px;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px 14px;
}

@media (max-width: 768px) {
  #gruendachgenerator .content {
    padding-bottom: 220px;
  }
  #gruendachgenerator .content .page1 {
    margin-bottom: 40px;
  }
  #gruendachgenerator .weiter,
  #gruendachgenerator .zurueck {
    bottom: 200px;
  }
  #gruendachgenerator .page2 .weiter,
  #gruendachgenerator .page2 .zurueck {
    bottom: 140px;
  }

  #gruendachgenerator .page3 .weiter,
  #gruendachgenerator .page3 .zurueck {
    bottom: 130px;
  }

  #gruendachgenerator .page4 .weiter,
  #gruendachgenerator .page4 .zurueck {
    bottom: 0px;
  }
}

@media (max-width: 550px) {
  #gruendachgenerator .page4 h4.normal {
    margin-top: 20px;
  }
  #gruendachgenerator .logo-left.medium-logo-center img.logo {
    margin: 8px 0 0 0;
    min-width: 52px;
  }
  #gruendachgenerator .content {
    padding-left: 9px;
    padding-right: 9px;
  }
  #gruendachgenerator h3,
  #gruendachgenerator h4 {
    font-size: 3.5vw;
  }
  #gruendachgenerator .smalllink, #gruendachgenerator .smalllink a {
    line-height: 2.6vw;
    font-size: 2.3vw;
  }
  #gruendachgenerator .page4 .zurueck {
    display: none;
  }
  #gruendachgenerator .breadcrumb {
    margin-left: 14px;
  }
  #gruendachgenerator .breadcrumb a {
    margin-right: 4px;
    font-size: 2.8vw;
  }
  #gruendachgenerator .breadcrumb a::after {
    padding-left: 5px;
  }
}

@media (max-width: 400px) {
  #gruendachgenerator .header-top,
  #gruendachgenerator .header-top a {
    font-size: 2.8vw;
  }
}


#gruendachgenerator .weiter:hover,
#gruendachgenerator .zurueck:hover {
  background-color: #ff6600;
  color: #fff;
  padding: 2px 14px;
}

#gruendachgenerator .zurueck {
  right: 122px;
  color: #aaa;
}

#gruendachgenerator .page4 .zurueck {
  left: 0;
  right: inherit;
  bottom: 30px;
}

#gruendachgenerator .page4 .plz {
  width: 30%;
  margin: 0;
  float: left;
}

#gruendachgenerator .page4 .ort {
  width: 65%;
  margin: 0;
  margin-left: 5%;
}

#gruendachgenerator .stats {
  list-style-type: none;
  margin: 40px 0 40px 0;
  padding: 0;
  height: 100px;
}

#gruendachgenerator .stats li {
  margin: 0 20px 0 0;
  padding: 0;
  float: right;
  line-height: 40px;
  width: 31%;
  text-align: right;
  font-size: 14px;
}
#gruendachgenerator .stats li strong {
  font-size: 18px;
}

#gruendachgenerator .stats li:first-child {
  margin-right: 0 !important;
}

#gruendachgenerator .stats li .big {
  font-family: 'LatoLight';
  font-size: 56px;
  letter-spacing: -1px;
  font-weight: 300;
}

@media (max-width: 1024px) {
  #gruendachgenerator .stats li .big {
    font-size: 5.5vw;
  }
  #gruendachgenerator .stats li strong {
    display: block;
    line-height: 4px;
  }
  #gruendachgenerator .stats li {
    margin: 0 1.2vw 0 0;
  }
}

#gruendachgenerator .stats li .big.dif:after {
  content: " /";
  margin-right: 10px;
}

#gruendachgenerator .stats li .big.green {
  color: #009900;
}

#gruendachgenerator .stats li .big.red {
  color: #ff0000;
}

@media (max-width: 550px) {
  #gruendachgenerator .stats li strong {
    display: inline;
    font-size: 4.5vw;
  }
  #gruendachgenerator .stats li {
    width: 100%;
    text-align: left;
    font-size: 2.8vw;
    line-height: 7vw;
    margin: 0;
  }
  #gruendachgenerator .stats li br {
    display: none;
  }
  #gruendachgenerator .stats li .big {
    position: relative;
    top: 1px;
  }
  #gruendachgenerator .stats li .big.dif::before {
    content: ":";
    font-size: 4.5vw;
    margin-right: 5px;
  }
  #gruendachgenerator .stats li .big.dif::after {
    content: "/";
    margin-right: 0;
  }
}

#gruendachgenerator .aufbau {
  position: absolute;
  top: 0;
  width: 24%;
  position: relative;
}

#gruendachgenerator .aufbau .img .el1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}
#gruendachgenerator .aufbau .img .el2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
#gruendachgenerator .aufbau .img .el3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
#gruendachgenerator .aufbau .img .el4 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#gruendachgenerator .aufbau .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
}

#gruendachgenerator .aufbau .img.modul1 {
  top: 55px;
  z-index: 30;
}

#gruendachgenerator .aufbau .img.modul2 {
  top: 120px;
  z-index: 20;
}

#gruendachgenerator .aufbau .img.modul3 {
  top: 190px;
  z-index: 10;
}

#gruendachgenerator .aufbau .img.modul5 {
  top: 340px;
  z-index: 5;
  width: 120%;
  left: -10%;
  max-width: 120%;
}


#gruendachgenerator .slider {
  position: absolute;
  top: 320px;
  left: 29%;
  width: 20px;
  height: 100px;
  display: none;
  overflow: visible;
  animation: moveInSlider .4s ease .8s;
}

@keyframes moveInSlider {
  0% {
    transform: scale(1);
  }
  65% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes moveInSliderMobile {
  0% {
    transform: scale(1.1);
  }
  65% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
  }
}

@media (max-width: 768px) {
  #gruendachgenerator .slider {
    transform: scale(1.1);
    animation: moveInSliderMobile .4s ease .8s;
    left: 28%;
  }
}

#gruendachgenerator .slider .value {
  position: absolute;
  top: 108%;
  left: -12px;
  font-size: 12px;
  padding: 0px 5px;
  border: 1px solid #aaa;
  display: block;
  width: 37px;
  text-align: center;
}

#gruendachgenerator .slider .handleEnv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 26px);
  margin-top: 10px;
  margin-bottom: 16px;
}

#gruendachgenerator .slider .handle {
  position: absolute;
  top: 0;
  left: -1px;
  width: 17px;
  height: 9px;
  background-color: rgb(119, 119, 119);
  z-index: 200;
  border: 1px solid #fff;
}

#gruendachgenerator .slider .handle .hit {
  display: block;
  position: absolute;
  top: -11px;
  left: -13px;
  width: 40px;
  height: 30px;
}

#gruendachgenerator .slider .slider-prev,
#gruendachgenerator .slider .slider-next {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: auto;
}

#gruendachgenerator .slider .slider-next {
  top: 94%;
}

#gruendachgenerator .slider .slider-prev:hover,
#gruendachgenerator .slider .slider-next:hover {
  cursor: pointer;
}

#gruendachgenerator .slider .slider-wrapper {
  position: relative;
  height: 100%;
}

#gruendachgenerator .slider .slider-wrapper:after {
  content: "";
  position: relative;
  top: 0;
  left: 7px;
  display: block;
  height: 100%;
  width: 1px;
  border-right:1px solid rgb(119, 119, 119);
}

#gruendachgenerator .page2 {
  counter-reset: modulCounter 5;
}

#gruendachgenerator .page2 .modul {
  clear: both; 
  width: 65% !important;
  margin-left: 35%;
  margin-top: 40px;
  position: relative;
  counter-increment: modulCounter -1;
}

#gruendachgenerator .page2 .env {
  margin-top: 90px;
}

@media (max-width: 768px) {
  #gruendachgenerator .page2 .env {
    margin-top: 0;
  }
  #gruendachgenerator .stats {
    margin: 20px 0 10px 0;
  }
}

@media (max-width: 550px) {
  #gruendachgenerator .stats {
    margin: 0 0 8px 0;
  }
}

#gruendachgenerator .page2 .modul::before {
  content: counter(modulCounter);
  position: relative;
  left: -16px;
  font-size: 14px;
  border: 1px solid #aaa;
  padding: 2px 7px;
  border-radius: 50%;
}

#gruendachgenerator .page2 .modul.active {
  animation: moveIn .4s ease;
}

#gruendachgenerator .page2 .modul.active::before {
  left: -40px;
  font-size: 20px;
  padding: 2px 9px;
}

@keyframes moveIn {
  0% {
    transform: scale(.95);
  }
  65% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

#gruendachgenerator .page2 .modul.selected::before {
  background-color: #17862d;
  color: #fff;
  border: none;
}

#gruendachgenerator .page2 .modul.active {
  border: 1px solid #6d7379;
  height: 260px;
  background-color: #e7e7e7;
}

#gruendachgenerator .page2 .modul.active ul.modul-content {
  display: block;
}

#gruendachgenerator .page2 .modul .warning.active {
  display: block;
}

#gruendachgenerator .page1 .warning.active {
  display: inline;
}

#gruendachgenerator .page2 .modul .warning,
#gruendachgenerator .page1 .warning {
  display: none;
  color: #ff0000;
}

#gruendachgenerator .warningExit {
  display: none;
  position: fixed;
  left: calc(50vw - 250px);
  top: calc(50vh - 115px);
  width: 500px;
  height: 230px;
  border: 2px solid #ff6600;
  background-color: #e7e7e7;
  padding: 16px;
  font-size: 17px;
  z-index: 2000;
  
  -webkit-box-shadow: 3px 3px 31px 0px rgba(0,0,0,0.37);
  -moz-box-shadow: 3px 3px 31px 0px rgba(0,0,0,0.37);
  box-shadow: 3px 3px 31px 0px rgba(0,0,0,0.37);
}

#gruendachgenerator .warningExit.modal {
  height: auto;
  padding-bottom: 60px;
}

#gruendachgenerator .warningExit h3 {
  color: #ff0000;
}

#gruendachgenerator .modul .warning .aktuell {
  font-weight: 900;
  color: #000;
}

#gruendachgenerator .page2 .modul .closeModul,
#gruendachgenerator .warningExit .closeModul {
  position: absolute;
  right: 9px;
  top: 0;
  display: none;
  width: 10px;
  height: 10px;
}

#gruendachgenerator .page2 .modul.active .closeModul,
#gruendachgenerator .warningExit .closeModul {
  display: block;
}

#gruendachgenerator .page2 .modul > a.showProducts {
  font-size: 17px;
  opacity: 0.6;
  position: relative;
  left: -40px;
  padding-left: 37px;
  padding-right: 10px;
  display: inline-block;
  min-width: 280px;
}

@media (max-width: 1024px) {
  #gruendachgenerator .page2 .modul > a.showProducts {
    font-size: 16px;
  }
}

@media (max-width: 550px) {
  #gruendachgenerator .page1 .warning.active {
    padding-left: 0 !important;
    display: block;
    text-align: left;
    padding-bottom: 20px;
  }
  #gruendachgenerator .warningExit {
    left: 2.5%;
    width: 95%;
    font-size: 2.8vw;
  }
}

#gruendachgenerator .page2 .modul.active > a.showProducts {
  left: -54px;
}

#gruendachgenerator .page2 .modul.selected > a {
  opacity: 1;
}

#gruendachgenerator .page2 .modul .removeModul {
  font-size: 12px;
  margin-left: -20px;
  display: none !important;
}

#gruendachgenerator .page2 .modul.active.selected .removeModul:hover {
  opacity: 1;
}

#gruendachgenerator .page2 .modul.selected .removeModul {
  display: inline !important;
  opacity: .65;
}

#gruendachgenerator .page2 .modul > a:hover {
  color: initial;
}

#gruendachgenerator .page2 .modul ul.modul-content {
  display: none;
  margin: 0;
  padding: 16px;
  list-style-type: none;
}

#gruendachgenerator .page2 .modul ul.modul-content .modul-content {
  padding: 0;
}

#gruendachgenerator .page2 .modul.selected .showProducts,
#gruendachgenerator .page2 .modul.selected .removeModul {
  color: #6d7379;
}

#gruendachgenerator .page2 .modul.selected .showProducts .addon {
  display: none;
}

#gruendachgenerator .page2 .modul ul.modul-content > li {
    margin: 0;
    padding: 0;
    float: left;
    width: 23%;
    height: 196px;
    margin-right: 1%;
    line-height: 21px;
    position: relative;
    opacity: 0.6;
    color: #6d7379;
}

#gruendachgenerator .page2 .modul ul.modul-content > li.categorie {
  opacity: 1;
}

#gruendachgenerator .page2 .modul ul.modul-content > li.categorie strong {
  opacity: .6;
}

#gruendachgenerator .page2 .modul ul.modul-content.col-1 > li {
  width: 98%;
}

#gruendachgenerator .page2 .modul ul.modul-content.col-2 > li {
  width: 48%;
}

#gruendachgenerator .page2 .modul ul.modul-content.col-3 > li {
  width: 32%;
}

#gruendachgenerator .page2 .modul > ul.modul-content.colCat-2 > li {
  width: 70%;
}

#gruendachgenerator .page2 .modul > ul.modul-content.colCat-2 > li:last-child {
  width: 28%;
  margin-right: 0;
  padding-left: 4px;
}

#gruendachgenerator .page2 .modul ul.modul-content li.active {
    opacity: 1;
}

#gruendachgenerator .page2 .modul > ul li:after {
    content: "";
    display: block;
    border-right: 1px solid #6d7379;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

#gruendachgenerator .page2 .modul ul.modul-content > li:last-child:after {
    display: none;
}

#gruendachgenerator .page2 .modul ul.modul-content .modul-content {
  margin-top: 5px;
}

#gruendachgenerator .page2 .modul .categorie > strong {
  font-size: 13px;
}

#gruendachgenerator .page2 .modul ul.modul-content .modul-content li {
  height: 170px;
}

#gruendachgenerator .page2 .modul ul.modul-content .modul-content li:after {
  border: none;
}

#gruendachgenerator .uibutton,
#gruendachgenerator .page2 .modul ul.modul-content > li .addButton {
  display: block;
  width: 90%;
  border: solid 2px #aaa;
  background-color: #fff;
  padding:2px;
  text-align: center;
  font-size: 13px;
  margin-top: 16px;
  position: absolute;
  bottom: 0;
}

#gruendachgenerator .uibutton:hover,
#gruendachgenerator .page2 .modul ul.modul-content > li .addButton:hover {
  background-color: #8d8d8d;
  border: solid 2px #8d8d8d;
  color: #fff;
}

#gruendachgenerator .uibutton:active,
#gruendachgenerator .page2 .modul ul.modul-content > li .addButton.active {
    background-color: #aaa;
    color: #fff;
}

#gruendachgenerator .uibutton {
  width: 170px;
}

#gruendachgenerator .uibutton.left {
  margin-left: 16px;
  margin-bottom: 16px;
}

#gruendachgenerator .uibutton.right {
  margin-right: 16px;
  margin-bottom: 16px;
  color: #fff;
  background-color: #009900;
  border-color: #090;
}

#gruendachgenerator .page2 .modul .product {
    font-size: 13px
}


#gruendachgenerator .page2 .modul .product strong {
    font-size: 13px;
}

#gruendachgenerator .page2 .aufbau .flower {
  position: absolute;
  top: -20px;
  left: 0;
}

@media (max-width: 1280px) {
  #gruendachgenerator .page2 .modul > ul.modul-content.colCat-2 > li:last-child {
    width: 29%;
  }
  #gruendachgenerator .page2 .modul > ul.modul-content.colCat-2 > li:last-child .addButton {
    margin-left: 10px;
  }
  #gruendachgenerator .page2 .modul ul.modul-content {
    padding: 10px;
  }
}

@media (max-width: 1024px) {
  #gruendachgenerator .page2 .modul .product {
    font-size: 12px;
    line-height: 18px !important;
  }
  #gruendachgenerator .page2 .modul .product strong {
    font-size: 12px;
  }
  #gruendachgenerator .page2 .modul .removeModul {
    margin-left: -54px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  #gruendachgenerator .page2 .modul {
    width: 78% !important;
    margin-left: 22%;
  }
  #gruendachgenerator .aufbau {
    left: -90px;
  }

  #gruendachgenerator .slider {
    left: 15%;
  }
}

@media (max-width: 550px) {
  #gruendachgenerator .uibutton,
  #gruendachgenerator .page2 .modul ul.modul-content > li .addButton {
    width: auto;
    padding: 1px 10px;
    font-size: 3.3vw;
  }
  #gruendachgenerator .page2 .modul {
    width: 66% !important;
    margin-left: 33%;
  }
  #gruendachgenerator .page2 .modul.active {
    height: auto;
    width: 66% !important;   
    margin-left: 33%;
  }
  #gruendachgenerator .page2 .modul.active::before {
    left: -40px;
    font-size: 20px;
    padding: 1px 11px;
    position: absolute;
    line-height: 29px;
  }
  #gruendachgenerator .page2 .modul.active .removeModul {
    margin-left: 0;
    padding-left: 10px;
  }
  #gruendachgenerator .page2 .modul.selected .removeModul {
    display: block !important;
    margin: 0;
    padding-left: 26px;
  }
  #gruendachgenerator .page2 .modul .closeModul,
  #gruendachgenerator .warningExit .closeModul {
    right: 8px;
    top: 4px;
  }
  #gruendachgenerator .page2 .modul ul.modul-content > li {
    width: 100% !important;
    float: none;
    height: auto;
  }
  #gruendachgenerator .page2 .modul .product .textDetail p {
    margin-bottom: 8px;
  }
  #gruendachgenerator .page2 .modul .product .textDetail br {
    display: none;
  }
  #gruendachgenerator .page2 .modul .product .textDetail span:after {
    content: "|";
    padding: 0 5px;
  }
  #gruendachgenerator .page2 .modul .product .textDetail span:last-child:after {
    display: none;
  }
  #gruendachgenerator .page2 .modul > ul li::after {
    display: none;
  }
  #gruendachgenerator .uibutton,
  #gruendachgenerator .page2 .modul ul.modul-content > li .addButton {
    position: relative;
    bottom: 10px;
    left: 0;
  }
  #gruendachgenerator .slider {
    top: 361px;
    left: 25%;
  }
  #gruendachgenerator .page2 .modul > a.showProducts {
    font-size: 4.4vw;
    padding-right: 0;
  }
  #gruendachgenerator .page2 .modul.active > a.showProducts {
    left: 0;
    padding-left: 10px;
    padding-right: 0;
    top: 0;
  }
  #gruendachgenerator .page2 .modul > a.showProducts {
    left: 0;
    min-width: auto;
    padding-left: 0;
  }
  #gruendachgenerator .aufbau {
    left: -70px;
    top: 35vh;
    width: 38%;
    position: fixed;
    z-index: -1;
  }
  #gruendachgenerator .aufbau .img.modul1 {
    top: 38px;
  }
  #gruendachgenerator .aufbau .img.modul2 {
    top: 87px;
  }
  #gruendachgenerator .aufbau .img.modul3 {
    top: 135px;
  }
  #gruendachgenerator .slider {
    left: calc(33% - 28px);
  }
  #gruendachgenerator .page2 .modul ul.modul-content .modul-content li {
    height: auto;
  }
  #gruendachgenerator .page2 .modul > ul.modul-content.colCat-2 > li:last-child {
    margin-top: 12px;
    border-top: 1px solid #6d7379;
    padding-top: 9px;
  }
  #gruendachgenerator .page2 .modul > ul.modul-content.colCat-2 > li:last-child .addButton {
    margin-left: 0;
  }
  #gruendachgenerator #modul-0-categories-1-product-0 {
    height: auto !important;
  }
  #gruendachgenerator .warningExit.modal {
    padding-bottom: 0;
  }
  #gruendachgenerator .uibutton.left {
    margin-left: 0;
  }
  #gruendachgenerator .uibutton.right {
    margin-right: 0;
  }
}

#gruendachgenerator .page2 .aufbau .movein {
  animation: movein .4s ease;
}
@keyframes movein {
  0% {
    transform: scale(.4);
    opacity: 0;
  }
  65% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#gruendachgenerator .page2 .aufbau .grow {
  animation: grow .4s ease;
}
@keyframes grow {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

#gruendachgenerator .page2 .aufbau .shrink {
  animation: shrink .4s ease;
}
@keyframes shrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

#gruendachgenerator .page2 .aufbau .up1 {
  animation: up1 .4s ease;
}
@keyframes up1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

#gruendachgenerator .page2 .aufbau .up2 {
  animation: up2 .4s ease;
}
@keyframes up2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

#gruendachgenerator .page2 .aufbau .up3 {
  animation: up3 .4s ease;
}
@keyframes up3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
  100% {
    transform: translateY(0);
  }
}

#gruendachgenerator .page2 .aufbau .down1 {
  animation: down1 .4s ease;
}
@keyframes down1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(0);
  }
}

#gruendachgenerator .page2 .aufbau .down2 {
  animation: down2 .4s ease;
}
@keyframes down2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

#gruendachgenerator .page2 .aufbau .down3 {
  animation: down3 .4s ease;
}
@keyframes down3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(14px);
  }
  100% {
    transform: translateY(0);
  }
}

#gruendachgenerator .page2 .aufbau .aniLoop1 {
  animation: aniLoop1 1.6s ease infinite;
}
@keyframes aniLoop1 {
  0% {
    transform: translateY(0) translateX(0) rotate(.3deg);
  }
  45% {
    transform:  translateX(0px) rotate(-.3deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(.3deg);
  }
}

#gruendachgenerator .page2 .aufbau .aniLoop2 {
  animation: aniLoop2 1.6s ease infinite;
}
@keyframes aniLoop2 {
  0% {
    transform: translateY(0) translateX(0) rotate(-.3deg);
  }
  70% {
    transform:  translateX(-0px) rotate(.3deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(-.3deg);
  }
}

#gruendachgenerator .page2 .aufbau .ani1 {
  animation: ani1 .8s ease;
}
@keyframes ani1 {
  0% {
    transform: translateY(0) translateX(0);
  }
  40% {
    transform: translateY(-2px) translateX(1px);
  }
  76% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

#gruendachgenerator .page2 .aufbau .ani1.flower {
  animation: ani1flower .8s ease;
}
@keyframes ani1flower {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  40% {
    transform: translateY(-1px) translateX(1px) rotate(-1deg);
  }
  76% {
    transform: translateX(-1px) rotate(.5deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

#gruendachgenerator .page2 .aufbau .ani2 {
  animation: ani2 .8s ease;
}
@keyframes ani2 {
  0% {
    transform: translateY(0) translateX(0);
  }
  33% {
    transform: translateX(-1px);
  }
  66% {
    transform: translateY(-1px) translateX(1px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}


#gruendachgenerator .page2 .aufbau .ani3 {
  animation: ani3 .8s ease;
}
@keyframes ani3 {
  0% {
    transform: translateY(0) translateX(0);
  }
  33% {
    transform: translateX(-.5px);
  }
  66% {
    transform: translateY(-.5px) translateX(.5px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

#gruendachgenerator .page2 .aufbau .ani3.flower {
  animation: ani3flower .8s ease;
}
@keyframes ani3flower {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  20% {
    transform: translateY(-1px) translateX(.5px) rotate(-.3deg);
  }
  50% {
    transform: translateX(-.5px) rotate(.3deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}


#gruendachgenerator .page2 .aufbau .ani4 {
  animation: ani41 .8s ease;
}
@keyframes ani4 {
  0% {
    transform: translateY(0) translateX(0);
  }
  40% {
    transform: translateY(-.5px) translateX(.5px);
  }
  76% {
    transform: translateX(-.5px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

#gruendachgenerator .page1 .form,
#gruendachgenerator .page3 .form  {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#gruendachgenerator .form ul.floatLeft {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#gruendachgenerator .form ul.floatLeft li {
  float: left;
  margin: 0 0 20px 0;
  padding: 0 20px 0 0;
  width: 20%;
}

#gruendachgenerator .form ul.floatLeft li img {
  width: 100%;
}

#gruendachgenerator .page3 .form ul.floatLeft li img {
  width: 100%;
}

#gruendachgenerator .pflichthinweis {
  position: relative;
  top: 20px;
}

#gruendachgenerator .pflichthinweis small {
  font-size: 12px;
}

#gruendachgenerator .form li.spacerTop {
  margin-top: 20px;
}
#gruendachgenerator .spacer {
  margin-top: 72px;
}

#gruendachgenerator .form li .txt {
  font-size: 22px;
  font-weight: 800;
  display: inline-block;
  width: 320px;
}

@media (max-width: 1024px) {
  #gruendachgenerator .form li .txt {
    font-size: 1.8vw;
  }
  #gruendachgenerator .form input.checkbox,
  #gruendachgenerator .page1 .form input.radio,
  #gruendachgenerator .page3 .form input.radio {
    width: 17px;
    margin-right: 8px;
  }
}

@media (max-width: 768px) {
  #gruendachgenerator .form input.checkbox,
  #gruendachgenerator .page1 .form input.radio,
  #gruendachgenerator .page3 .form input.radio {
    margin-right: 5px;
  }
  #gruendachgenerator .form li .txt {
    width: 220px;
  }
}

@media (max-width: 920px) {
  #gruendachgenerator .form ul.floatLeft li {
    width: 20%;
  }
}

@media (max-width: 550px) {
  #gruendachgenerator .form ul.floatLeft li {
    text-align: center;
  }
  #gruendachgenerator .form li .txt {
    width: 41vw;
  }
  #gruendachgenerator .spacer {
    margin-top: 20px;
  }
}

#gruendachgenerator .page1 .form label,
#gruendachgenerator .page3 .form label {
  display: inline;
  color: #6d7379;
}

#gruendachgenerator .page1 .form input + label.txt p,
#gruendachgenerator .page3 .form input + label.txt p {
  line-height: 16px;
  margin-top: 6px;
}

#gruendachgenerator .page1 .form input:checked + label.txt p,
#gruendachgenerator .page3 .form input:checked + label.txt p {
  font-weight: 900;
}

#gruendachgenerator .page1 .form label.txt,
#gruendachgenerator .page3 .form label.txt {
  font-weight: 200;
}

#gruendachgenerator .page3 .form label.txt {
  font-size: 14px !important;
}

#gruendachgenerator .page4.form label small {
  width: 70%;
}

#gruendachgenerator .page4.form label.txt {
  font-weight: 200;
  display: inline;
  color: #6d7379;
  font-size: 22px;
}

#gruendachgenerator .page4.form label.txt.eins,
#gruendachgenerator .page4.form label.txt.zwei {
  vertical-align: super;
}

#gruendachgenerator .page4.form label.txt.drei {
  vertical-align: top;
}

@media (max-width: 1013px) {
  #gruendachgenerator #modul-0-categories-1-product-0 {
    height: 147px;
  }
}

@media (max-width: 920px) {
  #gruendachgenerator .page4.form label.txt {
    font-size: 1.8vw;
    position: relative;
    top: 7px;
  }
  #gruendachgenerator .page4.form label.txt.zwei {
    top: 6px;
  }
  #gruendachgenerator .page4.form label.txt.drei {
    vertical-align: super;
  }
}

@media (max-width: 768px) {
  #gruendachgenerator .weiter, #gruendachgenerator .zurueck {
    font-size: 4.5vw;
  }
}

@media (max-width: 550px) {
  #gruendachgenerator .page4.form label.txt {
    font-size: 2.8vw;
    position: relative;
    top: -3px;
    line-height: 3.2vw;
  }
  #gruendachgenerator .form li .txt {
    font-size: 2.8vw;
  }
  #gruendachgenerator .weiter,
  #gruendachgenerator .zurueck {
    font-size: 8vw;
  }
  #gruendachgenerator .page4 .weiter {
    font-size: 6vw;
  }
  #gruendachgenerator .pflichthinweis small {
    font-size: 2.8vw;
  }
  #gruendachgenerator .page4.form label small {
   font-size: 2.8vw !important;
  }
  #gruendachgenerator .page4.form label.txt.drei {
    vertical-align: bottom;
  }
}

@media (max-width: 400px) {
  #gruendachgenerator .page4.form label.txt {
    font-size: 3.4vw;
    top: -3px;
    line-height: 3.8vw;
  }
}

#gruendachgenerator #GDG_datenschutz,
#gruendachgenerator #GDG_mehrinfos {
  vertical-align: top;
  margin-top: 8px;
}

#gruendachgenerator #GDG_datenschutz {
  margin-top: 3px;
}


#gruendachgenerator .page1 .form input,
#gruendachgenerator .page3 .form input {
  display: inline-block;
  width: 150px;
  height: auto;
  border: 0;
  background-color: #d0d0d0;
  color: #6d7379;
  font-size: 34px;
  padding: 10px;
  line-height: 30px;
  text-align: right;
  position: relative;
  top: 12px;
}

#gruendachgenerator .page4.form input.std {
  display: inline-block;
  border: 0;
  background-color: #d0d0d0;
  color: #6d7379;
  padding: 10px;
  line-height: 30px;
  position: relative;
  top: 12px;
}

#gruendachgenerator .form input.checkbox,
#gruendachgenerator .page1 .form input.radio,
#gruendachgenerator .page3 .form input.radio {
  width: 20px;
  height: 20px;
  top: 2px;
}

#gruendachgenerator .page3 .form input.checkbox,
#gruendachgenerator .page3 .form input.radio {
  float: left;
}

#gruendachgenerator .form .checkbox {
  accent-color: #6d7379;
}

#gruendachgenerator .info-icon img {
  width: 13px;
  position: relative;
  z-index: 10;
}

#gruendachgenerator .info-icon.blink {
  position: relative;
  z-index: 1;
}

#gruendachgenerator .info-icon.blink:after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #ff6600;
  position: absolute;
  top: 6.5px;
  left: 0;
  opacity: 0;
  animation: blink 1s 3;
}

@keyframes blink {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

@media (max-width: 1024px) {
  #gruendachgenerator .info-icon.blink:after {
    top: 5.5px;
  }
}

@media (max-width: 768px) {
  #gruendachgenerator .info-icon.blink:after {
    top: 5px;
  }
}


@media (max-width: 768px) {
  #gruendachgenerator .form input.checkbox,
  #gruendachgenerator .page1 .form input.radio,
  #gruendachgenerator .page3 .form input.radio {
    width: 16px;
    height: 16px;
    top: 0;
  }
  #gruendachgenerator .page1 .form input,
  #gruendachgenerator .page3 .form input {
    font-size: 31px;
    padding: 5px 10px 5px 10px;
  }
}

@media (max-width: 550px) {
  #gruendachgenerator .info-icon.blink:after {
    left: -1.5px;
  }
  #gruendachgenerator .form ul.floatLeft li {
    text-align: center;
  }
  #gruendachgenerator .page1 .form input.radio,
  #gruendachgenerator .page3 .form input.radio {
    display: block;
    margin: 0 auto;
  }

  #gruendachgenerator .page1 .form label.txt,
  #gruendachgenerator .page3 .form label.txt {
    font-size: 3vw;
  }
  #gruendachgenerator .form ul.floatLeft li {
    padding-right: 8px;
    margin-bottom: 0;
  }
  #gruendachgenerator .page3 .form ul.floatLeft li {
    width: 50%;
    min-height: 290px;
  }
  #gruendachgenerator .page3 .form ul.floatLeft li img {
    min-height: 127px;
  }
  #gruendachgenerator .page3 .form ul.floatLeft li .smalllink {
      display: inline-block;
      height: 67px;
  }
  #gruendachgenerator .page3 .form ul.floatLeft li p {
    min-height: 51px;
    display: inline-block;
    margin-bottom: 0;
    width: 80%;
    font-size: 14px;
  }
  #gruendachgenerator .page3 .form input.checkbox,
  #gruendachgenerator .page3 .form input.radio {
    margin-bottom: 0;
  }
  #gruendachgenerator .page1 .form input,
  #gruendachgenerator .page3 .form input {
    font-size: 6vw;
    padding: 3px 6px 3px 6px;
  }
  #gruendachgenerator #GDG_mehrinfos {
    vertical-align: middle;
    margin-top: 0;
  }
}

#gruendachgenerator .info-icon {
  position: absolute;
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: 14px;
}

#gruendachgenerator .info-icon:hover {
    cursor: pointer;
}

#gruendachgenerator .page1 .info-icon,
#gruendachgenerator .page2 .info-icon {
  margin: 0 0 0 7px;
}

#gruendachgenerator .categorie .info-icon .tooltip {
  display: none;
}

#gruendachgenerator .tooltipBig:hover {
  cursor: pointer;
}

#gruendachgenerator .tooltipBig {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  font-size: 12px;
  width: 300px;
  height: auto;
  background-color: #fff;
  border: 2px solid #ff6600;
  padding: 8px 18px;
  display: none;
}

#gruendachgenerator .tooltipBig.active {
    display: block;
}

#gruendachgenerator .info-icon .tooltip {
    display: none;
}

#gruendachgenerator .page2 .info-icon {
  top: -5px;
  left: 0;
  margin: 0 0 0 5px;
  position: relative;
  font-size: 18px;
}

#gruendachgenerator .page2 .tooltip {
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  width: 250px;
}

#gruendachgenerator .page4 .sendMainForm.sending:hover {
  cursor: not-allowed;
}

#gruendachgenerator .page4 .sendMainForm.sending {
  opacity: .5;
}

#gruendachgenerator .page4 .thankyou {
  font-size: 22px;
  font-weight: 200;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

@media (max-width: 550px) {
  #gruendachgenerator .page1 .info-icon,
  #gruendachgenerator .page2 .info-icon {
    position: relative;
    top: -10px;
  }
  #gruendachgenerator .info-icon img {
    width: 10px;
  }
  #gruendachgenerator .tooltipBig {
    width: 80vw;
    left: 10vw;
  }
}