/* ════ DIY (theme-agnostisch) ════ */

/* Tutorial Step-by-Step */
.mup-tut-step { margin-top: 3rem !important; align-items: center; }
.mup-tut-num {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 0.85;
  margin: 0 !important;
  opacity: 0.18;
  color: currentColor;
}

/* Blog Magazine Feed */
.mup-blog-row { align-items: center !important; }
.mup-blog-meta {
  font-size: 0.7rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.5;
  margin: 0 0 0.8rem !important;
}
.mup-blog-title {
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  line-height: 1.2 !important;
  margin: 0 0 0.8rem !important;
}
.mup-blog-title a { color: inherit !important; text-decoration: none !important; transition: opacity 0.3s; }
@media (hover: hover) { .mup-blog-title a:hover { opacity: 0.6; } }
.mup-blog-lede {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  opacity: 0.8;
  max-width: 540px;
}
.mup-blog-divider {
  border-color: currentColor !important;
  opacity: 0.12 !important;
  margin: 2.5rem 0 !important;
}

/* Material-Liste */
.mup-material-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem !important;
  margin-top: 2.5rem !important;
}
.mup-material-item {
  text-align: center;
  margin: 0 !important;
}
.mup-material-item .wp-block-image {
  margin: 0 0 0.8rem !important;
  border-radius: 4px;
  overflow: hidden;
}
.mup-mat-name {
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  margin: 0 0 0.25rem !important;
}
.mup-mat-meta {
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 !important;
}
@media (max-width: 760px) { .mup-material-grid { grid-template-columns: repeat(2, 1fr); } }