@charset "utf-8";
/* CSS Document */
h1 {
      text-align: center;
      margin: 40px 0;
      font-family: "Inria, serif;"
      color: #ff8000;
    }

    .card-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: nowrap;
    }

    .card {
      flex: 1;
      border: none;
      border-radius: 12px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.15);
      overflow: hidden;
      background: #fff;
      cursor: pointer;
      max-width: 380px;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    }

    .image-reveal-container {
      position: relative;
      overflow: hidden;
    }

    .image-reveal-container img {
      width: 100%;
      display: block;
      transition: transform 0.6s ease;
    }

    .card:hover img {
      transform: scale(1.03);
    }

    /* --- Graue Abdeckung mit Hover & Rolladen --- */
    .gray-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(128, 128, 128, 1.0);
      transform: translateY(0);
      transition:
        transform 1s cubic-bezier(0.645, 0.045, 0.355, 1),
        background-color 0.4s ease;
      z-index: 2;
    }

    /* Hover-Vorschau: leicht transparent */
    .image-reveal-container:hover .gray-cover {
      background-color: rgba(128, 128, 128, 0.8);
    }

    /* Klick-Effekt */
    .gray-cover.open {
      transform: translateY(-100%);
    }

    @media (max-width: 991px) {
      .card-container {
        flex-direction: column;
        align-items: center;
      }
      .card {
        max-width: 90%;
      }
    }