@charset "utf-8";

      /* CSS Document */
      /*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx CARDS-NEU/*/

      .container {
        display: flex;
        flex-wrap: wrap;
        /* this */
        gap: 50px;
        max-width: 98%;
        grid-auto-flow: dense;
        grid-auto-rows: 200px auto auto;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr));
        gap: 1em;
        margin: 0 auto;

      }

      .container>div {
        height: auto;
        flex: max(370px, 100%/3 + 0.1%);
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-weight: 400;
        text-align: center;
        border-radius: 0.8em;
      }

      .zoomable {
        transition: transform 1.2s;
        /* Animation */
      }

      .zoomable:hover {
        transform: scale(1.2);
        /* Vergrößerung um 50% */
      }

      .zoomable02 {
        transition: transform 1.2s;
        /* Animation */
      }

      .zoomable02:hover {
        transform: scale(1.1);
        /* Vergrößerung um 50% */
      }

      .card {
        background-color: #222;
        border-radius: 0.5em;
        overflow: hidden;
        -webkit-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 10px 10px 93px 0px rgba(0, 0, 0, 0.75);


        img {
          width: 90%;
          max-width: 500px;
          height: auto;
          object-fit: cover;
          border-radius: 0.5em;
          /*object-position: 10% 60%;*/
          padding-top: 10px;
        }
      }


      .card_link {
        font-family: Verdana, Arial, sans-serif;
        font-size: 0.8em;
        line-height: 1.2em;
        background-color: #111;
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        border-radius: 0.5em;
        overflow: hidden;
      }

      p {
        font-family: Verdana, Arial, sans-serif;
        font-size: 0.9em;
        text-align: left;
        font-style: normal;
        color: #999;
      }

      .actions {
        font-family: Verdana, Arial, sans-serif;
        font-size: 0.8em;
        font-style: italic;
        font-weight: lighter;
        color: #666;
        padding-inline: 0.5em;
        margin: 0;
      }

      .actions {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0.6em;
        /*color: orange;*/

        button {
          all: unset;
          animation: .3s ease;
          padding: .3em .5em;
          border: 1px solid transparent;
          border-radius: .3em;
          cursor: pointer;

          &:hover {
            border: 1px solid currentcolor;
          }

          &:active {
            background-color: #777;
            color: #F9F3EE;
            border: 1px solid #000;
          }
        }
      }




      /* Medium devices (ab 600px) */
      @media only screen and (min-width: 600px) and (max-width: 959px) {
        body {
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          color: #999;
          font-size: 1.0em;
          line-height: 1.0em;
        }

        .container>div {
          height: auto;
          flex: max(250px, 100%/3 + 0.1%);
        }

        .card {
          font-size: 100%;

        }
      }

      @media only screen and (min-width: 960px) and (max-width: 1199px) {
        body {
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          color: #999;
          font-size: 1.4em;
          line-height: 1.2em;
        }

        .container {
          /* this */
          gap: 50px;
          max-width: 90%;
        }


        .container>div {
          height: auto;
          flex: max(250px, 100%/3 + 0.1%);
        }

        .card {
          font-size: 100%;

        }
      }

      @media only screen and (min-width: 1200px) {
        body {
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          color: #999;
          font-size: 1.4em;
          line-height: 1.2em;
        }

        .container {
          /* this */
          gap: 50px;
          max-width: 70%;
        }

        .container>div {
          height: auto;
          flex: max(250px, 100%/3 + 0.1%);
        }

        .card {
          font-size: 100%;

        }
      }

      /* styles 4:3 */
      @media (width <=800px) and (width> 800px) {
        body {
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          color: #999;
          font-size: 1.4em;
          line-height: 1.4em;
        }

        .card {
          font-size: 100%;

        }
      }


      /* styles 4:3 */
      @media (width <=1024px) and (width> 1024px) {
        body {
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          color: #999;
          font-size: 1.6em;
          line-height: 1.6m;
        }

        .card {
          font-size: 100%;

        }

        .img {
          width: 180px;
          float: left;
          margin-bottom: 10px;
        }
      }


      /* styles 16:9 (HD) */
      @media (width <=1280px) and (width> 1280px) {
        body {
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
          font-size: 1.8em;
          line-height: 1.8m;
          color: #999;
        }

        .card {
          font-size: 100%;

        }

        .bild {
          max-width: 100px;

          margin-bottom: 10px;
        }
      }