.moia-wrap {
  position: relative;
  width: 100%;
  max-width: var(--moia-maxw, 900px);
  margin-inline: auto;
  aspect-ratio: auto;
}

/* Basisbild */
.moia-base {
  margin: 0;
  position: relative;
}
.moia-base img {
  display: block;
  width: var(--moia-w1, 100%);
  height: auto;
  border-radius: var(--moia-radius, 16px);
}

/* Top-Bild überlagert, leicht gedreht und verschoben */
.moia-top {
  margin: 0;
  position: absolute;
  inset: auto 0 0 auto; /* rechts-unten als Basis */
  transform: translate(var(--moia-offset-x, 12%), var(--moia-offset-y, -18%)) rotate(var(--moia-rotate, 6deg));
  z-index: var(--moia-z-top, 2);
  transform-origin: center;
}
.moia-top img {
  display: block;
  width: var(--moia-w2, 70%);
  height: auto;
  border-radius: var(--moia-radius, 16px);
}

/* Shadow optional */
.moia-shadow img {
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

/* Responsiv: untereinander stapeln (wenn aktiviert) */
@media (max-width: 1200px) {
  .moia-top img { width: var(--moia-w2, 70%); }
}
@media (max-width: 992px) {
  .moia-top img { width: var(--moia-w2, 70%); }
}

/* Stack bei Breakpoint, aber nur wenn data-stack="true" */
@media (max-width: var(--moia-break, 768px)) {
  .moia-base img {
    width: 100%; /* auf Mobil volle Breite für bessere Lesbarkeit */
  }
  .moia-top[data-stack="true"] {
    position: relative;
    inset: unset;
    transform: none;
    z-index: auto;
    margin-top: var(--moia-gap, 0px);
  }
  .moia-top img {
    width: 100%;
  }
}

/* Hinweisbox */
.moia-notice {
  padding: 12px 14px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 8px;
  font-size: 14px;
}