/* main elements */
@import url('/huepercdn/fonts/barlow/fonts.css');

body {
    font-family: 'Barlow', sans-serif;
    font-weight: 200;
    color: #343a40;
    line-height: 1.6;
}


/* Progressbar Händlermappe */
.bg-pink {
    background-color: #e5007d;
}


/* links */
a {
    color: #000000;
    transition: 0.2s ease-in-out;
    text-decoration: none;
}
  
a:hover, a:focus {
    color: #7b7b7b;
    text-decoration: initial;
}
  

/* blockquote */

blockquote {
    font-family: 'Barlow', sans-serif;
    color: Tomato;
    position: relative;
    margin: 0.5em;
    padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 6em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
}
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
    /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:6em;
    line-height: 1;
    right:0;
    bottom:-0.5em;
    content: "\201D";
}
blockquote footer {
    padding: 0 2em 0 0;
    text-align:right;
}
blockquote cite:before {
    content: "\2013";
}


/* hotspot text */
.hotspot-text {
    font-family: 'Barlow', sans-serif;
    font-weight: 200;
    color: black;
}
  

/* preise */
.price-wrap  {
    color: #000;
    text-align: left;

    background-image: url(/huepercdn/img/preis-bg-herzstueck.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}

.price {
    font-size: 70px;
    font-weight: 500;
    line-height: 0.8;
    letter-spacing: 0em;
}

.price-prefix {
    letter-spacing: 0.3em;
    font-size: 80%;
    text-transform: uppercase;
}

.price-black  .price-wrap{
    color: white;
    background-color: black;
}

.price-black .price,
.price-black .price-suffix,
.price-black .price-prefix {
    color: white;
}

@media (min-width: 992px) {
    .price {
        font-size: 65px;
    }
}

@media (max-width: 992px) {
    .price-suffix, .price-prefix {
        font-size: 80%;
    }
    .price {
        font-size: 50px;
    }
}

@media (max-width: 480px) {
    .price-wrap {
        margin-bottom: 30px;
    }
    .price {
        font-size: 60px;
    }
}


/*** Background Color ***/

/* Kompetenz */
.bg-green-gradient {
    background: rgb(234,230,188);
    background: linear-gradient(90deg, rgba(234,230,188,1) 0%, rgba(129,197,161,1) 100%);
}
  
.bg-kompetenz {
    background-color: #d2e6cf;
}

/* Ergonomie */
.bg-blue-gradient {
    background: rgb(92,151,184);
    background: linear-gradient(90deg, rgba(92,151,184,1) 0%, rgba(43,130,180,1) 100%);
}

.bg-babyblue {
    background-color: #b9e1f0;
}

/* Qualität */
.bg-qualitaet-gradient {
    background: rgb(216,232,236);
    background: linear-gradient(90deg, rgba(216,232,236,1) 0%, rgba(177,220,218,1) 100%);
}

.bg-qualitaet {
    background-color: #acd1dd;
}

/* Nachhaltigkeit */
.bg-nachhaltigkeit-gradient {
    background: rgb(151,188,178);
    background: linear-gradient(90deg, rgba(151,188,178,1) 0%, rgba(171,209,153,1) 100%);
}

.bg-nachhaltigkeit {
    background-color: #abd199;
}

/* Regionalität */
.bg-regionalitaet-gradient {
    background: rgb(228,233,189);
    background: linear-gradient(90deg, rgba(228,233,189,1) 0%, rgba(203,213,138,1) 100%);
}

.bg-regionalitaet {
    background-color: #cbd58a;
}

/* Technik */
.bg-technik-img {
    background-image: url('../img/herzstueck-bg-technik.jpg');
}

.bg-technik {
    background-color: #e34026;
}

.bg-technik-gradient {
    background: rgb(107,195,195);
    background: linear-gradient(65deg, rgba(107,195,195,1) 0%, rgba(83,167,167,1) 100%);
}

/* Individualität */
.bg-individualitaet-img {
    background-image: url('../img/herzstueck-bg-individualitaet.jpg');
}

.bg-individualitaet-gradient {
    background: rgb(252,230,233);
    background: linear-gradient(81deg, rgba(252,230,233,1) 0%, rgba(215,200,213,1) 100%);
}

.bg-individualitaet {
    background-color: #009cbf;
}

/* Versprechen */
.bg-versprechen-gradient {
    background: rgb(18,0,11);
    background: linear-gradient(63deg, rgba(18,0,11,1) 0%, rgba(133,104,112,1) 100%);
}

.bg-versprechen {
    background-color: #856870;
}


  /*** Buttons ***/

/* Button Händlermappe */
.btn-haendler {
    color: rgb(255, 255, 255);
    background-color: #e5007d;
    border-color: #e5007d;
}

.btn-haendler:hover {
    color: #fff;
    background-color: #9c125e;
    border-color: #9c125e;
}

.btn-haendler.focus, .btn-haendler:focus {
    color: #fff;
    background-color: #9c125e;
    border-color: #9c125e;
    box-shadow: 0 0 0 0.2rem #9c125e8a;
}

 /* Button Kompetenz */
 .btn-kompetenz {
    color: #000;
    background-color: #d2e6cf;
    border-color: #d2e6cf;
}

.btn-kompetenz:hover {
    color: #fff;
    background-color: #a4b9a1;
    border-color: #a4b9a1;
}

.btn-kompetenz.focus, .btn-kompetenz:focus {
    color: #fff;
    background-color: #a4b9a1;
    border-color: #a4b9a1;
    box-shadow: 0 0 0 0.2rem #a4b9a18e;
}


 /* Button Qualität */
 .btn-qualitaet {
    color: #000;
    background-color: #acd1dd;
    border-color: #acd1dd;
}

.btn-qualitaet:hover {
    color: #fff;
    background-color: #59a0b7;
    border-color: #59a0b7;
}

.btn-qualitaet.focus, .btn-qualitaet:focus {
    color: #fff;
    background-color: #59a0b7;
    border-color: #59a0b7;
    box-shadow: 0 0 0 0.2rem #59a0b770;
}

 /* Button Nachhaltigkeit */
 .btn-nachhaltigkeit {
    color: #000;
    background-color: #abd199;
    border-color: #abd199;
}

.btn-nachhaltigkeit:hover {
    color: #fff;
    background-color: #97bcb2;
    border-color: #97bcb2;
}

.btn-nachhaltigkeit.focus, .btn-nachhaltigkeit:focus {
    color: #fff;
    background-color: #97bcb2;
    border-color: #97bcb2;
    box-shadow: 0 0 0 0.2rem #97bcb285;
}

 /* Button Regionalität */
 .btn-regionalitaet {
    color: #000;
    background-color: #e4e9bd;
    border-color: #e4e9bd;
}

.btn-regionalitaet:hover {
    color: #fff;
    background-color: #cbd58a;
    border-color: #cbd58a;
}

.btn-regionalitaet.focus, .btn-regionalitaet:focus {
    color: #fff;
    background-color: #cbd58a;
    border-color: #cbd58a;
    box-shadow: 0 0 0 0.2rem #cbd58a8a;
}

 /* Button Technik */
 .btn-technik {
    color: rgb(255, 255, 255);
    background-color: #e34026;
    border-color: #e34026;
}

.btn-technik:hover {
    color: #fff;
    background-color: #a6a6a5;
    border-color: #a6a6a5;
}

.btn-technik.focus, .btn-technik:focus {
    color: #fff;
    background-color: #a6a6a5;
    border-color: #a6a6a5;
    box-shadow: 0 0 0 0.2rem #a6a6a57e;
}

 /* Button Individualität */
 .btn-individualitaet {
    color: rgb(255, 255, 255);
    background-color: #009cbf;
    border-color: #009cbf;
}

.btn-individualitaet:hover {
    color: #fff;
    background-color: #007b97;
    border-color: #007b97;
}

.btn-individualitaet.focus, .btn-individualitaet:focus {
    color: #fff;
    background-color: #007b97;
    border-color: #007b97;
    box-shadow: 0 0 0 0.2rem #009cbf8e;
}

 /* Button Versprechen */
 .btn-versprechen {
    color: rgb(255, 255, 255);
    background-color: #856870;
    border-color: #856870;
}

.btn-versprechen:hover {
    color: #fff;
    background-color: #695058;
    border-color: #695058;
}

.btn-versprechen.focus, .btn-versprechen:focus {
    color: #fff;
    background-color: #695058;
    border-color: #695058;
    box-shadow: 0 0 0 0.2rem #6950588c;
}

 /* Button Ergonomie */
 .btn-ergonomie {
    color: rgb(255, 255, 255);
    background-color: #2b82b4;
    border-color: #2b82b4;
}

.btn-ergonomie:hover {
    color: #fff;
    background-color: #256083;
    border-color: #256083;
}

.btn-ergonomie.focus, .btn-ergonomie:focus {
    color: #fff;
    background-color: #256083;
    border-color: #256083;
    box-shadow: 0 0 0 0.2rem #25618370;
}

/* Zoom Hover */
.zoom {
    transition: all .3s ease-in-out;
    overflow: visible;
}

.zoom:hover {
    transform: scale(1.03) rotate(-5deg);
}

/* Cookie Bar */

.btn-primary {
    background-color: #f8f9fa;
    border: 1px solid #212529;
    color: #212529;
    padding: 12px 28px 12px 28px;
    border-radius: 0px;
    transition: 0.2s ease-in-out;
  }
  
  .btn-primary:hover, .btn-primary:focus {
    background-color: #212529;
    border: 1px solid #212529;
    color: #f8f9fa;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #212529;
    border: 1px solid #212529;
    color: #f8f9fa;
  }