.grid {
    text-align:center;
    padding: 0px; 
    gap: auto;
  }
div.grid-item{
    max-width: 100%;
    text-align: left;
    aspect-ratio: 1 / 1;
    margin-top: var(--separator);
  }
div.grid-item > h1{ margin-bottom: 1.2rem }
div.grid-item > p{ font-size: 1.4rem; }

img.grid-item{
    border: 2px solid #fff;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: var(--separator);
  }

.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 */
}  

.q-m { 
  background-color: var(--dk-magenta); 
  color: var(--textcolor-light);
}
.q-g { 
    background-color: var(--dk-gelb); 
    color: var(--textcolor-dark);
}

@media (min-width: 768px) {
  .grid {
    padding:0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--separator);
  }
}

@media (min-width: 1024px) {
  .grid {
    padding:0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--separator);
  }
  .grid > *:nth-child(3n + 2) {
    position: relative;
  }
  .grid-item:last-child:nth-child(3n + 1) {
    position:relative;
    grid-column: 2;            /* in die mittlere Spalte verschieben */
  }
}