.grid {
    text-align:center;
    padding: 0px; 
    gap: auto;
  }
  img.grid-item{
    border: 2px solid #fff;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: var(--separator);
  }
  div.grid-item {
    box-sizing:border-box !important;
    padding: 15%;
    width: 100%;
   /* max-width:500px;*/
    aspect-ratio: 1 / 1;
    position: relative;
    margin: auto;
    margin-top: var(--separator);
    font-size:clamp(1.5rem, 3vw, 2rem);
    vertical-align: middle;
    text-align: left;
    cursor:pointer;
  }
  div.grid-item h1 { text-transform: uppercase; }
  div.grid-item div.readon{
    position: absolute;
    bottom:0px;
    left:0px;
    height:40px;
    width: 100%;
    font-size: 1rem;
    /*color: inherit; var(--dk-black);*/
    text-align: center;
  }
  .switch { display: block; }
  .q-o { background-color: var(--dk-orange); }
  .q-m { 
    background-color: var(--dk-magenta); 
    color: var(--textcolor-light);
  }
  .q-g { 
    background-color: var(--dk-gelb); 
    color: var(--dk-black);
  }
.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper img {
  display: block;
  width: 100%;   /* Bild skaliert responsiv */
  height: auto;
}

.image-wrapper .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;   /* Größe relativ zum Bild → skaliert mit */
  height: auto;
  pointer-events: none; /* optional: Klicks gehen durchs Icon */
}  


  @media (min-width: 768px) {
    .grid {
      padding:0px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--separator);
    }
    div.grid-item {
      font-size:clamp(1.1rem, 2vw, 2rem);
      padding: 12%;
      overflow:hidden;
    }
  }


  @media (min-width: 1024px) {
    h1 { font-size: 2.0rem; }
    .grid {
      padding:0px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--separator);
    }
    .grid > *:nth-child(3n + 2) {
      position: relative;
      top: -200px;
    }
    div.grid-item {
      font-size: 1.1rem; //clamp(1.5rem, 5vw, 5rem);
    }

    .grid-item:last-child:nth-child(3n + 1) {
      position:relative;
      top: -200px;
      grid-column: 2;            /* in die mittlere Spalte verschieben */
    }
  }