/* Komplettes CSS für die Drehung der Cardgroups */

:root {
    --time: 0.707s;
  }
  

.layout-1 .card {
    perspective: 40rem;
  }
  
  .layout-1 .content {
    display: flex;
    transform-style: preserve-3d;
    transition: var(--time) transform;
  }
  .layout-1 .card:hover .content, .layout-1 .card:focus .content {
    transform: rotateX(-180deg);
  }
  
  .layout-1 .card-img-top, .layout-1 .card-body {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    min-width: 100%;
  }
  
  .layout-1 .card-body {
    transform: rotateX(-180deg) translate(-100%, 0);
  }
  
  .layout-1 .card {
    display: flex;
    transition: z-index, transform calc(var(--time) / 4);
    transition-delay: var(--time), 0s;
    text-decoration: none;
    color: inherit;
    z-index: 0;
  }
  .layout-1 .card:hover {
    transition-delay: 0s;
    z-index: 1;
  }
  .layout-1 .card:active {
    transform: scale(0.975);
  }
  
  .layout-1 .content {
    border-radius: 0.25rem;
    flex: 1;
  }
  
  .layout-1 .card-img-top, .layout-1 .card-body {
    display: block;
    align-items: center;
    background-color: white;
    box-sizing: border-box;
    padding: 1.5rem;
    border-radius: 0.25rem;
  }
  
  .layout-1 .card-img-top {
    font-size: 1.5rem;
  }
  
  .layout-1 .shadow, .layout-1 .card-img-top, .layout-1 .card-body {
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
  }