/* Gutscheingenerator Unterseite ---
------------------------------------*/

.gutschein .section--hero .bg-image{
    background-image: url(../asset/Hero_Freude_schenken.jpg);
}

/* Motive für den Gutschein in variablen Austausch durch Variable via script */
.gutschein-auswahl .bg-image{
    --img-roses: url(../asset/gutschein/Gutschein_Roses.jpg);
    --img-flowerpower: url(../asset/gutschein/Gutschein_Flowerpower.jpg);
    --img-bees: url(../asset/gutschein/Gutschein_Bees.jpg);
    --img-halloween: url(../asset/gutschein/Gutschein_Spooky.jpg);
    --selected-motiv-image: var(--img-roses);
    background-image: var(--selected-motiv-image);
}

/* Teaser-Kacheln Home ---------------
------------------------------------*/

.home .teaser--1{
    background-image: var(--gradientLesbarkeit), url(../asset/Kachel\ Paulas\ Garden\ Lovestory.jpg);
    background-position: top right;
}

.home .teaser--2{
    background-image: var(--gradientLesbarkeit), url(../asset/Kachel\ Blühende\ ANgebote.jpg);
}

.home .teaser--3{
    background-image: var(--gradientLesbarkeit), url(../asset/Kachel\ Freude\ schenken.jpg);
}

.home .teaser--4{
    background-image: var(--gradientLesbarkeit), url(../asset/kachel\ Grüne\ Events.jpg);
    background-position: bottom right;
}

/*  Teaser-Kacheln Events----------------
-------------------------------------- */
.events .teaser--1{
    background-image: var(--gradientLesbarkeit), url(../asset/CTA\ Angebote.jpg);
    background-position: top right;
}

.events .teaser--2{
    background-image: var(--gradientLesbarkeit), url(../asset/Events\ trockenblumen.jpg);
}

.events .teaser--3{
    background-image: var(--gradientLesbarkeit), url(../asset/events\ Herbstdeko.jpg);
}

.events .teaser--4{
    background-image: var(--gradientLesbarkeit), url(../asset/Events\ adventskranz.jpg);
    background-position: bottom right;
}


/* Paulas Lovestory Image Section ----------
---------------------------------------------*/

.lovestory .bg-image--1{
    background-image: url(../asset/Kachel\ Paulas\ Garden\ Lovestory.jpg);
    background-position: top right;
}

.lovestory .bg-image--2{
    background-image: url(../asset/Lovestory_pic_1.jpg);
    background-position: bottom center;
}

/* Hero Sektion Angebote--------------------
------------------------------------------- */

.angebote .section--hero .bg-image{
    background-image: url(../asset/Hero\ Blühende\ Angebote.jpg);
}

/* Produktkarten Angebote------------------
---------------------------------------- */

.product-card--herbstastern .bg-image{
    background-image: url(../asset/Angebote_Herbstastern.jpg);
}

.product-card--ringelblume .bg-image{
    background-image: url(../asset/Angebote_Ringelblume.jpg);
}

.product-card--alpenveilchen .bg-image{
    background-image: url(../asset/Angebote_Alpenveilchen.jpg);
}

.product-card--herbstanemone .bg-image{
    background-image: url(../asset/Angebote_Herbstanemone.jpg);
}

.product-card--winterheide .bg-image{
    background-image: url(../asset/Angebote_Winterheide.jpg);
}

.product-card--chrysantheme .bg-image{
    background-image: url(../asset/Angebote_Chrysantheme.jpg);
}


/* Workshop Karten------------------
---------------------------------------- */
/* Original und Bild das bei der Animation der Karte gewechselt wird als Variable für den Keyframe
   Vorderseite als Backup fals das JS nocht funktioniert */
.section--workshop.trockenblumen .bg-image{
    --original-image: url(../asset/workshop/Motivkarten_Blume_Vorderseite.jpg);
    --swap-image: url(../asset/workshop/Motivkarten_Blume_Rueckseite.jpg);
    background-image: var(--original-image);
}

.section--workshop.herbstdeko .bg-image{
    --original-image: url(../asset/workshop/Motivkarten_Herbst_Vorderseite.jpg);
    --swap-image: url(../asset/workshop/Motivkarten_Herbst_Rueckseite.jpg);
     background-image: var(--original-image);
}

.section--workshop.advent .bg-image{
    --original-image: url(../asset/workshop/Motivkarten_Adventskränze_Vorderseite.jpg);
    --swap-image: url(../asset/workshop/Motivkarten_Adventskränze_Rueckseite.jpg);
     background-image: var(--original-image);
}