/*1678268846000*/
@charset "UTF-8";
@import "easy-autocomplete.min.css";
/**
 * Clay 3.68.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
#gfo-produktauswahl, #gfo-produktkonfig {
  background-color: whitesmoke;
  position: relative;
  min-height: 100%;
  padding-bottom: 100px;
}
#gfo-produktauswahl .gfo-head, #gfo-produktkonfig .gfo-head {
  width: 100%;
  color: white;
}
#gfo-produktauswahl .gfo-head a, #gfo-produktkonfig .gfo-head a {
  color: white;
}
#gfo-produktauswahl .kurve, #gfo-produktkonfig .kurve {
  position: relative;
  margin-bottom: 100px;
}
#gfo-produktauswahl section, #gfo-produktkonfig section {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #4d4d4d;
}
#gfo-produktauswahl .curve, #gfo-produktkonfig .curve {
  position: absolute;
  bottom: -100px;
  height: 100px;
  width: 100%;
  transform-origin: top;
}
#gfo-produktauswahl .curve img, #gfo-produktkonfig .curve img {
  width: 100%;
  height: 100%;
}
@media (max-width: 991.98px) {
  #gfo-produktauswahl .curve img, #gfo-produktkonfig .curve img {
    height: 30%;
  }
}
#gfo-produktauswahl .weiter, #gfo-produktkonfig .weiter {
  color: var(--secondary);
}
#gfo-produktauswahl .weiter i, #gfo-produktkonfig .weiter i {
  margin: 0 auto;
  font-size: 3rem;
  cursor: pointer;
}
#gfo-produktauswahl .swiper-button-prev, #gfo-produktkonfig .swiper-button-prev {
  left: -3%;
}
#gfo-produktauswahl .swiper-button-next, #gfo-produktkonfig .swiper-button-next {
  right: -3%;
}
#gfo-produktauswahl .swiper-pagination, #gfo-produktkonfig .swiper-pagination {
  position: unset;
}
#gfo-produktauswahl .swiper-slide-thumb-active .card, #gfo-produktkonfig .swiper-slide-thumb-active .card {
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
}

#produktliste-thumbnail {
  width: 90%;
  padding: 0 5px;
}
@media (min-width: 1200px) {
  #produktliste-thumbnail {
    width: 50%;
  }
}
#produktliste-thumbnail .swiper-slide:first-child .produkt-thumbnail {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#produktliste-thumbnail .swiper-slide:last-child .produkt-thumbnail {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
#produktliste-thumbnail .swiper-slide {
  padding: 1rem 0;
}
#produktliste-thumbnail .swiper-slide-thumb-active .produkt-thumbnail {
  background: var(--primary-gradient, linear-gradient(to right, #ff9900, #ffae00));
  color: white;
  cursor: default;
}
#produktliste-thumbnail .empfehlung {
  background: var(--secondary) !important;
  color: white;
}

.produkt-thumbnail {
  height: 80px;
  display: table-cell;
  vertical-align: middle;
  min-height: unset;
  width: inherit;
  background: white;
  transition: background;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  border-right: 2px solid whitesmoke;
}
@media (min-width: 1200px) {
  .produkt-thumbnail {
    height: 60px;
  }
}
.produkt-thumbnail p {
  margin: 0;
}

#gfo-produktauswahl ul.preis {
  list-style: none;
}
#gfo-produktauswahl ul.preis li:not(:first-child) {
  color: #4d4d4d;
  font-size: 0.75rem;
}
#gfo-produktauswahl .verfuegbarkeit-hinweis {
  border: solid 1.5px green;
  font-size: 1rem;
}
#gfo-produktauswahl .verfuegbarkeit-hinweis .verfuegbarkeit-hinweis {
  font-size: 3.5rem;
}
#gfo-produktauswahl .verfuegbarkeit-hinweis .verfuegbarkeit-hinweis-titel {
  font-size: 1.5rem;
}
#gfo-produktauswahl .verfuegbarkeit-hinweis i {
  padding-left: 1.2rem;
}

#gfo-produktkonfig h3 {
  font-size: 1.8rem;
}
#gfo-produktkonfig .gfo-card {
  transition: box-shadow 0.3s ease-in;
  display: flex;
  flex-direction: column;
}
#gfo-produktkonfig .gfo-card .card-header span {
  color: white;
  font-size: 0.9rem;
}
#gfo-produktkonfig ul.preis {
  list-style: none;
}
#gfo-produktkonfig ul.preis li:not(:first-child) {
  color: white;
  font-size: 0.75rem;
}
@media (max-width: 767.98px) {
  #gfo-produktkonfig .bezeichnung {
    font-size: 80%;
    font-weight: 400;
    color: #787878;
  }
}
#gfo-produktkonfig .bounce-enter-active {
  animation: bounce-in 0.5s;
}
#gfo-produktkonfig .bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
#gfo-produktkonfig .fade-enter-active, #gfo-produktkonfig .fade-leave-active {
  transition: opacity 0.25s, max-height 0.75s;
}
#gfo-produktkonfig .fade-enter, #gfo-produktkonfig .fade-leave-to {
  opacity: 0;
  max-height: 0;
}
#gfo-produktkonfig .fade-enter-to {
  max-height: fit-content;
}
#gfo-produktkonfig .gesamtkosten {
  padding-bottom: 12px !important;
}
#gfo-produktkonfig .gesamtkosten p {
  margin-bottom: 0;
}
#gfo-produktkonfig .gesamtkosten .preis {
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.2;
}
#gfo-produktkonfig .gesamtkosten .preis.ersparnis {
  color: #21a355;
}

#cart li {
  color: #4d4d4d !important;
}

.form-control {
  height: 2.2rem;
}

.warenkorb .sheet {
  padding-bottom: 0.4rem;
}
.warenkorb .sheet .row {
  border-bottom: 1px solid #d2d2d2 !important;
}
.warenkorb .sheet .row .row {
  border-bottom: none !important;
}
.warenkorb .sheet .row:last-child {
  border-bottom: none !important;
}
.warenkorb .warenkorb-edit a {
  color: #282828;
}
.warenkorb .warenkorb-edit a:hover {
  color: #787878;
}
.warenkorb .rabatte .fas {
  font-size: 3.2rem;
}
.warenkorb .badge {
  top: -15px;
  left: -5px;
  transition: visibility 0s, opacity 0.5s linear;
  position: relative !important;
}

.warenkorb-footer {
  width: 100%;
  z-index: 10;
  background-color: white;
  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.1);
}
.warenkorb-footer .container {
  max-width: 1024px;
}
.warenkorb-footer .preisleiste {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.warenkorb-footer .preisleiste ul {
  list-style: none;
  margin-bottom: 0;
}
.warenkorb-footer p {
  margin: 0;
}
@media (min-width: 1280px) {
  .warenkorb-footer p br {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .warenkorb-footer p .text-mobil {
    display: none;
  }
}
.warenkorb-footer .basket_preis {
  font-weight: 500;
  font-size: 1.5rem;
}
@media (max-width: 991.98px) {
  .warenkorb-footer .basket_preis {
    font-size: 1rem;
  }
}
.warenkorb-footer .btn {
  width: fit-content;
}
.warenkorb-footer .btn i {
  padding: 0;
}
.warenkorb-footer .btn span {
  display: none;
}
@media (min-width: 768px) {
  .warenkorb-footer .btn i {
    padding: 0 14px;
  }
}
@media (min-width: 992px) {
  .warenkorb-footer .btn i {
    padding: 0 10px 0 0;
  }
  .warenkorb-footer .btn span {
    display: inline;
  }
}

.verfuegbarkeit-anzeige-produkt {
  display: grid;
}
@media (min-width: 1200px) {
  .verfuegbarkeit-anzeige-produkt {
    grid-template-columns: 15% 65% 20%;
  }
}
@media (max-width: 1199px) {
  .verfuegbarkeit-anzeige-produkt {
    grid-template-columns: 20% 80%;
  }
}

.verfuegbarkeit-anzeige-adresse {
  padding-top: 10px;
  display: grid;
}
@media (min-width: 1200px) {
  .verfuegbarkeit-anzeige-adresse {
    grid-template-columns: 15% 85%;
  }
}
@media (max-width: 1199px) {
  .verfuegbarkeit-anzeige-adresse {
    grid-template-columns: 20% 80%;
  }
}

.small-green-check {
  font-size: 4rem;
}
@media (max-width: 770px) {
  .small-green-check {
    font-size: 2rem;
  }
}

.show-when-mobile {
  padding-top: 5px;
}
@media (min-width: 770px) {
  .show-when-mobile {
    display: none;
  }
}

@media (max-width: 1199px) {
  .item3 {
    grid-column-start: 2;
  }
}

@media (min-width: 1200px) {
  .float-button-right {
    float: right;
  }
}

.angabe_reset {
  position: relative;
  display: initial;
  text-decoration: none;
  padding: 2px 0;
  transition: 0.5s;
}
.angabe_reset:hover {
  text-decoration: none !important;
}
.angabe_reset:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.angabe_reset::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  top: 100%;
  left: 0;
  background: var(--secondary);
  transition: transform 0.5s;
  transform: scaleX(0);
  transform-origin: right;
}