/* ===== SOCIAL (scoped: .selling--social) ===== */
.selling.selling--social{
  background: rgba(43,32,26,.3);
  padding: 20px;
  margin: 20px 0;
  border-radius: 10px;
  border: 2px solid #000;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
}
.selling.selling--social:hover{
  border: 3px solid rgba(46,55,70,.7);
  box-shadow: 0 0 10px var(--pink), 0 4px 8px rgba(0,0,0,.2);
  animation: pulseGlow 1.5s infinite alternate ease-in-out;
}

/* Box-Layout */
.selling.selling--social .sellbox{
  max-width: 100%;
  width: 850px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.selling.selling--social .sellbox:hover{ background: rgba(43,32,26,.1); }

.selling.selling--social .sell-row{ display:flex; gap:20px; }

/* Text- und Bildboxen */
.selling.selling--social .txtbox{
  width: 75%;
  height: 220px;
  background: #3f5068;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  word-wrap: break-word;
}
.selling.selling--social .txtbox[role="link"]{ cursor: pointer; }

.selling.selling--social .txtbox h1,
.selling.selling--social .txtbox h2{
  font-size: clamp(14px,2vw,20px);
  margin: 5px 0;
  white-space: normal;
}

.selling.selling--social .jpgbox{
  width: 30%;
  height: 220px;
  background: #3f5068;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.selling.selling--social .jpgbox img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 30px;
  margin-top: 10px;
  opacity: .5;
  transition: opacity .2s ease, transform .2s ease;
}

/* ===== Glow bei Hover/Fokus auf der TXTBOX (nur im Social-Scope) ===== */
@keyframes socialPulse {
  0%   { box-shadow: 0 0 10px rgba(84,101,129,.35), 0 0 20px rgba(204,156,154,.28), 0 0 30px rgba(250,181,184,.22); }
  50%  { box-shadow: 0 0 15px rgba(250,181,184,.55), 0 0 30px rgba(204,156,154,.45), 0 0 45px rgba(84,101,129,.40); }
  100% { box-shadow: 0 0 20px rgba(84,101,129,.35), 0 0 30px rgba(204,156,154,.28), 0 0 40px rgba(250,181,184,.22); }
}

#socials-scope .sell-row.is-hover .jpgbox{
  animation: socialPulse 1.5s infinite alternate ease-in-out;
}
#socials-scope .sell-row.is-hover .jpgbox img{
  opacity: 1;
  transform: translateY(-1px);
}