fixed cards z-index on flip

marktplatz/templates/marktplatz/product_overview.html

@@ -172,6 +172,7 @@ $(document).ready(function(){
   .flipcard.is-flipped {
     /* transform: translateX(-100%) rotateY(-180deg);  */
     transform: rotateY(180deg);
+
   }
 
   .mab-card-face {
@@ -207,9 +208,14 @@ $(document).ready(function(){
 
   }
 
-  .toogle-overflow {
+  .toggle-overflow {
 
     overflow: auto;
+    /* z-index: 2; */
+  }
+
+  .toggle-zindex {
+    z-index: -1;
   }
 
   .mab-card-face--back {
@@ -350,7 +356,7 @@ $(document).ready(function(){
     <div
       class="card  {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}} {% for key in product.raumangebot %}{{key}} {% endfor %} {% if product.realitylab %}begleitet_true{% endif %} {% if product.urbanem %}urbanem_true{% endif %} {% if product.frei == 'JAJA' %} mab-card-container-highlight {% endif %}   ">
       <div id="product_{{product.pk}}_card" class="flipcard">
-        <div class="mab-card-face mab-card-face--front toogle-overflow">
+        <div class="mab-card-face mab-card-face--front toggle-overflow">
           <!--  -->
           <div class="mab-card {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}}   {% if product.frei == 'JAJA' %} mab-card-highlight {% endif %}" style="">
             <a href="{% url 'product-detail-type' type=product.type pk=product.pk  %}">
@@ -411,7 +417,7 @@ $(document).ready(function(){
 
         {% if request.user_agent.browser.family != 'Safari'  %}
 
-        <div class="mab-card-face mab-card-face--back">
+        <div class="mab-card-face mab-card-face--back toggle-zindex">
           <div class="mab-card  {% if product.frei == 'JAJA' %} {% endif %}">
 
             <div class="container flipper-wrapper" data-flip-card="product_{{product.pk}}_card">
@@ -465,7 +471,8 @@ $(document).ready(function(){
 
          let toggler = this.getAttribute("data-flip-card");
          $("#" + toggler ).toggleClass('is-flipped');
-         $("#" + toggler + " .mab-card-face" ).toggleClass('toogle-overflow');
+         $("#" + toggler + " .mab-card-face" ).toggleClass('toggle-overflow');
+         $("#" + toggler + " .mab-card-face" ).toggleClass('toggle-zindex');
 
       });
 
@@ -473,7 +480,8 @@ $(document).ready(function(){
 
          let toggler = this.getAttribute("data-flip-card");
          $("#" + toggler ).toggleClass('is-flipped');
-         $("#" + toggler + " .mab-card-face" ).toggleClass('toogle-overflow');
+         $("#" + toggler + " .mab-card-face" ).toggleClass('toggle-overflow');
+         $("#" + toggler + " .mab-card-face" ).toggleClass('toggle-zindex');
 
       });